首页 文章

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

提问于
浏览
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 $ 4.raise(/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:2221:15)Parser.pp.unexpected(/ home /)中的意外标记(41:79) vagans / Projects / test / node_modules / acorn / dist / acorn.js:603:10)at 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)at Parser.pp $ 3.parseExprSubscripts(/ home / vagrant / Projects / test / node_modules /) acorn / dist / acorn.js:1715:21)at Parser.pp $ 3.parseMaybeUnary(/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1692:19)at 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 . Parser.pp $ 3.parseMaybeAssign(/ home / test /Projects / test / node_modules / acorn /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 .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. . .  //
}

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

1 回答

  • 0

    首先,每当您收到错误意外令牌时...其9/10语法错误 . 所以进入你的example.vue并检查你是否在方法或计算或数据之后缺少冒号 . 所以这个错误肯定是在第40行的某个地方的 resources/assets/js/components/example/example.vue . 其次我想用webpack来完成,但是如果你想把脚本组合成一个,webpack会接受一系列脚本,如下所示:

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

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

相关问题