Question

我试图在Vue和Django上使用早午餐，但我得到一个空白页面，当我尝试在我的js中放置断点时，我发现它失败了：

import Vue from 'vue/dist/vue.js'

with＆＃39; Uncaught SyntaxError：意外的标识符＆＃39;

我的HTML是：

<html lang="en">
    <head>
        ...
        <link rel="stylesheet" type="text/css" href="{% static 'public/css/app.css' %}" />
    </head>
    <body>
        <div id="app">
          <router-view></router-view>
        </div>
        <script type="text/javascript" src="{% static 'public/js/vendors.js' %}"></script>
        <script type="text/javascript" src="{% static 'public/js/app.js' %}"></script>
    </body>
</html>

我的js是：

import Vue from 'vue/dist/vue.js'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
...
const app = new Vue({
    router,
    ...
}).$mount('#app');

我的早午餐配置是：

module.exports = {
    files: {
        javascripts: {
            joinTo: { 
                "js/vendors.js": /^node_modules/,
                'js/app.js': /^js/
            }
        },
        stylesheets: {joinTo: { 'css/app.css': 'scss/main.scss'}},
        templates: {
            joinTo: 'js/app.js'
        }
    },
    paths: {
        watched: ['js', 'scss']
    },
    plugins: {
        babel: {
            presets: ['es2015']
        }
    }
};

由于浏览器源代码中的某些原因，我看到我的js已编译，整个node_modules dir已编译，而原始js文件夹未编译。知道我做错了什么吗？

感谢。

Answer 1

看起来你错过了babel（或任何其他javascript“编译器”），将你的下一代javascript语法转换为浏览器今天所理解的东西。特别是导入语法还没有到达当前的浏览器。

对于早午餐，有例如tomquirk/brunch-vue-barebones骨架，它可以为您处理。

如何在Vue上使用早午餐

1 个答案: