Vue.js 2.0模块构建失败:SyntaxError:使用webpack, Elixir和gulp的意外令牌

Question

花了几乎一整天的时间尝试从Vue.js 1升级。X到Vue.js 2.0我仍然得到错误(使用gulp手表)

错误/~/buble-loader !。/~/vue-loader/lib/selector.js ?类型= script&指数= 0 !/资源/资产/js/组件//example.vue示例模块构建失败:SyntaxError: Unexpected token (41:79)在Parser.pp 4美元。提高(/home/漂泊者/项目/测试/node_modules/橡子/dist/acorn.js: 2221:15)/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:603:10在Parser.pp 3美元。parseExprAtom (/home/漂泊者/项目/测试/node_modules/橡子/dist/acorn.js: 1822:12)在解析器。parseExprAtom (/home/漂泊者/项目/测试/node_modules/buble/dist/buble.umd.js: 656:26)在Parser.pp 3美元。parseExprSubscripts (/home/漂泊者/项目/测试/node_modules/橡子/dist/acorn.js: 1715:21)在Parser.pp 3美元。parseMaybeUnary (/home/漂泊者/项目/测试/node_modules/橡子/dist/acorn.js: 1692:19)在Parser.pp 3美元。parseExprOps (/home/漂泊者/项目/测试/node_modules/橡子/dist/acorn.js: 1637:21)在Parser.pp 3美元。parseMaybeConditional (/home/漂泊者/项目/测试/node_modules/橡子/dist/acorn.js: 1620:21)在Parser.pp 3美元。parseMaybeAssign (/home/漂泊者/项目/测试/node_modules/橡子/dist/acorn.js: 1597:21)在Parser.pp 3美元。parseMaybeAssign (/home/漂泊者/项目/测试/node_modules/橡子/dist/acorn.js: 1608:25)@。/资源/资产/js/组件//exmple.vue示例七18 - 107 @/~/buble-loader !。/~/vue-loader/lib/selector.js ?类型= script&指数= 0 !/资源/资产/js/组件//exampleParent示例。./resources/assets/js/components/example/examplparent。vue @。/资源/资产/js/app.js

我尝试安装多次，现在以以下包

结束

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "dependencies": {
    "babel-core": "^6.18.0",
    "babel-loader": "^6.2.7",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-runtime": "^6.18.0",
    "bootstrap": "^3.3.7",
    "bootstrap-switch": "^3.3.2",
    "css-loader": "^0.25.0",
    "lodash": "^4.14.0",
    "vue": "^2.0.3",
    "vue-hot-reload-api": "^2.0.6",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^9.7.0",
    "vue-resource": "^1.0.3",
    "vue-strap": "^1.1.18"
  },
  "devDependencies": {
    "babel-preset-es2015": "6.9.0",
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "install": "^0.8.2",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.9",
    "npm": "^3.10.9",
    "vue-router": "^2.0.1"
  }
}

我的gulpfile看起来像

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
elixir(mix => {
    mix.sass('app.scss')
        .webpack('app.js')
        .webpack('backend.js')
       //  other stuff. . .  //
}

有什么问题吗?如何解决这些反复出现的错误?

Answer 1

首先，每当您得到一个错误的意外令牌…9/10的语法错误。看看你的例子。查看并检查方法或computed或data后面是否缺少冒号。所以这个误差肯定是存在的resources/assets/js/components/example/example.vue在第40行左右。其次，我不确定你想用webpack完成什么，但如果你想把脚本组合成一个，webpack会接受一个脚本数组，像这样:

        .webpack([
          'app.js',
          'scripts/choose-language.js'
        ])

，你甚至可以用第二个参数指定输出脚本文件名