Webpack vue-loader 为单页 .vue 组件提供“unexpected token {”

Question

我主要是一名 C# 后端开发人员并尝试学习 Vue.js。我使用 Visual Studio 2017 + ASP.NET MVC（作为 API + 一种布局）+ Vue.js + Webpack。
.vue 单页组件文件由 vue-loader 加载，.js 文件由babel-loader 与 es2015 预设。

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

./assets/component/navigation.vue 中的错误
模块构建失败：SyntaxError: Unexpected token {

Task Runner Explorer 内容：

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"
  }
}

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

Answer 1

错误可能不是来自您的.vue 文件，而是来自vue-loader 本身。如果您使用的是vue-loader >= 13.1（可能是vue-loader 12 个版本之一），那么您需要确保您的机器上有node 6.2 或更高版本，因为vue-loader 使用仅在该版本中可用的功能。您可以通过运行检查您的节点版本：

node --version

如果您无法更新节点版本，请尝试安装 vue-loader 的早期版本之一：

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

希望错误应该消失。

附带说明一下，您还应该开始使用 babel-preset-env 而不是 babel-preset-2015，因为它现在已经（或正在）被弃用。