使用Brunch搭配Vue和Django遇空白页及语法错误问题求助

看起来你遇到的问题大概率是Brunch的打包配置没覆盖到你的原JS目录，再加上可能的语法转译或路径配置问题，一步步来排查：

• 检查Brunch的监视目录配置
  打开你的brunch-config.js，找到paths.watched数组，确认你的原JS文件夹（比如src/js或者你自定义的目录）已经被添加进去了。Brunch只会编译它"监视"的目录下的文件，如果这个目录没在列表里，自然不会被处理。举个正确的配置例子：

  paths: {
    watched: ['src/js', 'src/vue', 'static/css'],
    // 其他路径配置...
  }
  

• 确认JS文件的打包规则
  检查files.javascripts.joinTo的配置，确保你的原JS目录被匹配到对应的输出文件里。比如你的原JS都在src/js下，那配置应该类似这样：

  files: {
    javascripts: {
      joinTo: {
        'js/app.js': /^src\/js/, // 用正则匹配你的原JS目录
        'js/vendor.js': /^node_modules/ // 第三方依赖单独打包
      }
    },
    // Vue组件或样式的配置...
  }
  

  如果这里的正则没命中你的原JS目录，这些文件就不会被打包到最终的JS文件里，浏览器自然找不到对应的代码，甚至触发语法错误。

• 解决Uncaught SyntaxError的语法错误
  这个错误通常有两个原因：

  1. 你的原JS文件本身存在语法问题（比如未闭合的括号、变量名错误等），可以先单独检查这些文件的语法，或者用ESLint之类的工具校验。
  2. Brunch没正确转译ES6+语法或Vue相关代码。确保你已经安装了babel-brunch和vue-brunch插件，并且在配置里启用：

     plugins: {
       babel: {
         presets: ['env', '@babel/preset-env'],
         ignore: [/node_modules/]
       },
       vue: {
         extractCSS: true, // 根据需求开启
         out: 'css/vue-styles.css'
       }
     }
     

     没有这些插件的话，Vue的单文件组件或者ES6语法可能无法被正确编译，导致浏览器无法解析。

• 验证Django的静态文件配置
  确保Brunch编译后的输出目录（比如static/js）被添加到Django的STATICFILES_DIRS里，同时模板中引用JS的路径要正确，比如：

  <script src="{% static 'js/app.js' %}"></script>
  

  如果路径错误，浏览器加载不到编译后的JS文件，也会导致页面空白。你可以打开浏览器的"网络"面板，查看JS文件的请求状态，如果是404，就说明路径配置有问题。

• 检查浏览器网络请求
  打开浏览器开发者工具的"网络"标签，看看你的原JS对应的编译文件有没有被成功加载，返回的状态码是不是200。如果请求失败，那就要回到Brunch的打包配置或Django的静态路径配置里找问题。

内容的提问来源于stack exchange，提问作者alexarsh