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文件无论我使用哪种组合都会给出语法错误。即使我的<template> <div> {{ greeting }} </div> </template> <script> export default { data: { greeting: 'Hello World' } } </script>错误绝对空：

，我也会遇到同样的错误

./assets/component/navigation.vue中的错误模块构建失败：SyntaxError：意外的令牌{

Task Runner Explorer内容：

nagivation.vue ：

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

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

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

app.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()
    ]
};

webpack.config.js ：

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

的package.json ：

org.joda.time.Period

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

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，因为现在已经（或正在）弃用。

Webpack vue-loader为单页.vue组件

1 个答案: