javascript - vue-router 意外导入 token

标签 javascript vue.js frontend vue-router

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

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

无论如何,使用这个“导入”命令我收到此错误: “未捕获的语法错误:意外的 token 导入”

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

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

感谢您的关注。

编辑: main.js

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

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

应用程序.vue:

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

<script>
    export default {}
</script>

最佳答案

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

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

更新:如果您没有安装模块捆绑程序,例如 Webpack,它接受具有依赖项的模块并生成代表这些模块的静态 Assets ,也可能会出现此错误。 从这里安装:https://webpack.js.org/guides/installation/

关于javascript - vue-router 意外导入 token ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47104606/

相关文章:

html - 如何让两个div在同一层级

css - 菜单选项卡在折叠时迷失方向

javascript - 带图片背景的点阵线

javascript - 使用一个简单的 jquery 脚本让 div 跟随滚动页面

javascript - 为什么这个 JS 不起作用?

javascript - 如何优雅地寻找元素?

python - Firebase(客户端与服务器端)

javascript - 突变有效负载在 vuex 存储突变中自行更改值

javascript - 在 Vue.js 2 组件中加载时未定义 Webpack 外部 JS 文件

html - devicePixelRatio 和 dppx 有什么不同?