4

在花了几乎一整天的时间尝试从 Vue.js 1.X 升级到 Vue.js 2.0 之后，我仍然遇到错误（使用 gulp watch）

./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/example/example.vue 中的错误模块构建失败：SyntaxError : Parser.pp.unexpected (/home/vagrant) 的 Parser.pp$4.raise (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:2221:15) 的意外令牌 (41:79) /Projects/test/node_modules/acorn/dist/acorn.js:603:10) 在 Parser.pp$3.parseExprAtom (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1822:12)在 Parser.parseExprAtom (/home/vagrant/Projects/test/node_modules/buble/dist/buble.umd.js:656:26) 在 Parser.pp$3.parseExprSubscripts (/home/vagrant/Projects/test/node_modules/acorn /dist/acorn.js:1715:21) 在 Parser.pp$3.parseMaybeUnary (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1692:19) 在 Parser.pp$3。parseExprOps (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1637:21) 在 Parser.pp$3.parseMaybeConditional (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn. js:1620:21) 在 Parser.pp$3.parseMaybeAssign (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1597:21) 在 Parser.pp$3.parseMaybeAssign (/home/vagrant/项目/test/node_modules/acorn/dist/acorn.js:1608:25) @ ./resources/assets/js/components/example/exmple.vue 7:18-107 @ ./~/buble-loader!./ ~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/js/app.jsparseMaybeConditional (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1620:21) 在 Parser.pp$3.parseMaybeAssign (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn. js:1597:21) 在 Parser.pp$3.parseMaybeAssign (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1608:25) @ ./resources/assets/js/components/example/ exmple.vue 7:18-107 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/example/exampleParent .vue @ ./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/js/app.jsparseMaybeConditional (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1620:21) 在 Parser.pp$3.parseMaybeAssign (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn. js:1597:21) 在 Parser.pp$3.parseMaybeAssign (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1608:25) @ ./resources/assets/js/components/example/ exmple.vue 7:18-107 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/example/exampleParent .vue @ ./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/js/app.js1608:25) @ ./resources/assets/js/components/example/exmple.vue 7:18-107 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type= script&index=0!./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/js/app.js1608:25) @ ./resources/assets/js/components/example/exmple.vue 7:18-107 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type= script&index=0!./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/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. . .  //
}

有什么问题 ？如何解决这些重复的错误？

4

1 回答 1

0

首先，每当您收到错误的意外令牌时......它的 9/10 语法错误。因此，进入您的 example.vue 并检查您是否在方法或计算或数据之后缺少冒号。所以这个错误肯定在 resources/assets/js/components/example/example.vue第 40 行左右。其次，我不确定你想用 webpack 完成什么，但如果你想将脚本组合成一个，webpack 将接受如下脚本数组：

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

您甚至可以使用第二个参数指定输出脚本文件名。

于 2017-02-16T19:22:09.630 回答