Webpack vue-loader给出了“意外令牌{”。对于单页.vue组件 [英] Webpack vue-loader gives "unexpected token {" for single-page .vue component

问题描述

我主要是C＃后端开发人员并且正在尝试学习Vue.js.我使用Visual Studio 2017 + ASP.NET MVC（作为API +一个布局）+ Vue.js + Webpack。

.vue 单页组件文件由 vue-loader 加载， .js 文件由 babel-loader加载 es2015 预设。

I am primarily a C# backend developer and trying to learn Vue.js. I use Visual Studio 2017 + ASP.NET MVC (as API + one layout) + Vue.js + Webpack.
.vue single-page component files are loaded by vue-loader, and .js files are loaded by babel-loader with es2015 preset.

app.js 已成功转换为输出 dist / script.js 文件，但 .vue 文件给出了语法错误，无论我使用哪种组合。即使我的 navigation.vue 错误绝对空，我也会遇到同样的错误：

app.js is transpiled successfully into output dist/script.js file by Babel, but .vue files give me syntax errors whichever combinations I use. I have the same error even if my navigation.vue error is absolutely empty:

./assets/component/navigation.vue中的错误

模块构建失败：SyntaxError：意外的令牌{

ERROR in ./assets/component/navigation.vue
Module build failed: SyntaxError: Unexpected token {

Task Runner Explorer内容：

Task Runner Explorer content:

nagivation.vue ：

<template>
    <div>
        {{ greeting }}
    </div>
</template>

<script>
    export default {
        data: {
            greeting: 'Hello World'
        }
    }
</script>

app.js ：

import Vue from "../vendor/vue.js";

Vue.component("navigation", require("../component/navigation.vue"));

const app = new Vue({
    el: "#app"
}); 

webpack.config.js ：

module.exports = {
    entry: "./assets/core/app.js",
    output: {
        filename: "./dist/script.js"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                options: {
                    presets: ["es2015"]
                }
            },
            {
                test: /\.vue$/,
                loader: "vue-loader"
            }
        ]
    },
    resolve: {
      extensions: ["*", ".js", ".vue"]  
    },
    plugins: [
        new NotifierPlugin()
    ]
};

package.json ：

{
  "version": "1.0.0",
  "name": "helloworld",
  "private": true,
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-vue": "^1.2.1",
    "clean-webpack-plugin": "^0.1.17",
    "webpack": "^3.8.1"
  },
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.2",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.7",
    "eslint": "^4.10.0",
    "eslint-cli": "^1.1.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-react": "^7.4.0",
    "vue-loader": "^13.5.0",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.3",
    "webpack-notifier": "^1.5.0"
  }
}

造成这种神秘错误的原因是什么？人们通常如何调试此类错误？

What can be a cause of such cryptic error? How people usually debug such errors?

推荐答案

错误可能不会来自您的 .vue 文件，但来自 vue-loader 本身。如果您使用的是 vue-loader> = 13.1 （可能还有一个 vue-loader 12个版本）你需要确保你的机器上有节点6.2 或更高版本，因为 vue-loader 使用的功能只会变成该版本提供。您可以通过运行检查节点版本：

The error likely isn't coming from your .vue file but from vue-loader itself. If you are using vue-loader >= 13.1 (and possibly one of the vue-loader 12 versions) then you will need to ensure you have node 6.2 or above on your machine, because vue-loader uses features that only became available in that version. You can check your node version by running:

node --version

如果您无法更新节点版本，请尝试通过以下方式安装早期版本的 vue-loader ：

If you can't update your node version then try installing one of the earlier releases of vue-loader by doing:

npm install vue-loader@13.0.1 --save-dev

希望错误消失。

作为旁注，你也应该开始使用 babel-preset-env 而不是 babel-preset-2015 因为现在已经（或正在）弃用。

As a side note, you should also start using babel-preset-env rather than babel-preset-2015 as that has now been (or is being) deprecated.

这篇关于Webpack vue-loader给出了“意外令牌{”。对于单页.vue组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！