使用 vue-router 导入意外的令牌答案

【问题标题】：Unexpected token import with vue-router使用 vue-router 导入意外的令牌
【发布时间】：2018-04-16 16:58:18
【问题描述】：

我想将我的 Vue 模板存储到变量中，以便我可以路由它们。

我创建了一个 App.vue 文件，其中仅包含一个 HTML 标题（用于测试目的）和一个 main.js 文件，其中包含一个我从未在 JavaScript 中使用过的“导入”命令，但我不知道有任何其他方法可以将模板文件的内容放入变量中，知道每个文档都要求这样做。

无论如何，使用这个“导入”命令我得到这个错误： "Uncaught SyntaxError: Unexpected token import"

这是导入行：“import App from '../vues/App';”

我检查了路径，没问题，但是如果您知道任何其他方法可以将模板文件的内容放入 JS 变量中，请告诉我。

感谢您的关注。

编辑： main.js

import App from '../vues/App';

new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
});

App.vue：

<template>
    <h1>Hello World!</h1>
</template>

<script>
    export default {}
</script>

【问题讨论】：

你能展示你的 main.js 代码吗？在 javascript 中，import 确实将代码文件放入范围，并将其结果放入变量中。在这种情况下，App 是保存来自../vues/App 的结果对象的变量。您是否尝试过在 .vue 文件中导出空白组件集？ <script>export default {}</script> 在您的<template></template> 通话后
感谢您的回答，我编辑了我的帖子。我尝试了export defaut，但结果是一样的

【解决方案1】：

您正在使用 es6 语法 ( import ) 并且您的环境仅支持 es5 语法。所以要么在你的 webpack 中配置“babel”，要么使用 require 而不是 import

var App = require( "../vues/App" );

更新：如果您没有安装模块捆绑器，也可能出现此错误，例如 Webpack 获取具有依赖关系的模块并生成代表这些模块的静态资产。从这里安装它：https://webpack.js.org/guides/installation/

【讨论】：

"Uncaught ReferenceError: require is not defined"
我已经用 npm 安装了 webpack，我不知道要在 index.html 中链接哪个文件才能使 require 工作，node_modules/webpack/bin/webpack.js 使用 require 本身跨度>