尝试导入时出现 Uncaught SyntaxError: Unexpected identifier error答案

【问题标题】：I got Uncaught SyntaxError: Unexpected identifier error when trying to import尝试导入时出现 Uncaught SyntaxError: Unexpected identifier error
【发布时间】：2019-12-07 16:33:55
【问题描述】：

我是 vue 新手。我试图渲染一个 vue 组件。但我得到了错误。我没有使用 vue-cli。我包括一个脚本https://cdn.jsdelivr.net/npm/vue

我的html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            VUE Study
        </title>
        <link href="stylee.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <div class="container" id="head">
        </div>
        <script src="components/app.js"></script>
    </body>
</html>

app.js

import Index from "./Index.vue"

new Vue({
    el: '#head',
    render: h => h(Index)
});

app.js 和 Index.vue 都在同一个文件夹中。请帮我解决这个问题..

【问题讨论】：

你在使用 vue-loader 和任何类型的打包工具吗？

标签： vue.js vuejs2

【解决方案1】：

出现错误是因为浏览器无法识别import 语句。由于您没有使用 webpack 之类的打包程序，因此您可以使用 Vue.component() 注册组件。这将消除在其他模块中导入组件的需要。

Vue.component('Index', {
  data() {
    return {
      value: 'Index component'
    }
  },
  template: `<h2>{{ value }}</h2>`
})

new Vue({
    el: '#head'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            VUE Study
        </title>
        <link href="stylee.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <div class="container" id="head">
            <index />
        </div>
        <script src="components/app.js"></script>
    </body>
</html>

【讨论】：

谢谢..我会试试的