如何在 Vue 中使用早午餐答案

【问题标题】：How to use brunch with Vue如何在 Vue 中使用早午餐
【发布时间】：2018-03-06 16:25:52
【问题描述】：

我正在尝试将 brunch 与 Vue 和 Django 一起使用，但我得到一个空白页，当我尝试在我的 js 中放置断点时，我发现它失败了：

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

带有“未捕获的语法错误：意外的标识符”

我的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 目录已编译，而原始 js 文件夹未编译。知道我做错了什么吗？

谢谢。

【问题讨论】：

查看 this 博客文章，该文章介绍了如何使用 brunch 设置 vuejs，它相当新，并且有一个 github 存储库可供您进行测试。此外，您的 app.js 脚本之后似乎缺少 require('app')。

标签： django vue.js brunch

【解决方案1】：

看起来你想念 babel（或任何其他 javascript“编译器”）来将你的下一代 javascript 语法转换成你的浏览器今天可以理解的东西。尤其是目前的浏览器还没有导入语法。

对于早午餐，例如 tomquirk/brunch-vue-barebones 骨架，它会为您处理这个。

【讨论】：

不。它没有帮助。我也有同样的问题
能否提供完整的跟踪信息？您的早午餐配置是否包含 plugins: { babel: { presets: ['es2015'] } } 之类的内容？
是的。我更新了问题。我在浏览器中看到 app.js 很好并且没有导入。但是我看到一个空页面，当我尝试在 app.js 中放置断点时，我跳转到原始 js 文件中描述的错误