Webpack vue-loader выдает "неожиданный токен {" для одностраничного компонента.vue

Question

Я прежде всего бэкэнд-разработчик на C# и пытаюсь изучить Vue.js. Я использую Visual Studio 2017 + ASP.NET MVC (как API + один макет) + Vue.js + Webpack.
.vue одностраничные файлы компонентов загружаются vue-loader, а также .js файлы загружаются babel-loader с es2015 предустановки.

app.js успешно переносится в вывод dist/script.js файл Бабелем, но .vue файлы дают мне синтаксические ошибки, какие бы комбинации я ни использовал. У меня та же ошибка, даже если мой navigation.vue ошибка абсолютно пуста:

ОШИБКА в./assets/component/navigation.vue
Ошибка сборки модуля: SyntaxError: Неожиданный токен {

Содержимое 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 как это сейчас (или в настоящее время) устарела.