Javascript 网页包vue加载程序提供；单页.vue组件的意外标记{"

我主要是一名C#后端开发人员，试图学习Vue.js。我使用Visual Studio 2017+ASP.NET MVC（作为API+one布局）+Vue.js+Webpack。

.vue

单页组件文件由

vue加载程序加载

，

.js

文件由

babel加载程序加载

，并带有

es2015

预设

Babel成功地将

app.js

传输到输出

dist/script.js

文件中，但是

.vue

文件会给我语法错误，无论我使用哪种组合。即使我的

导航.vue

错误是绝对空的，我也会有相同的错误：

./assets/component/navigation.vue中出错
模块生成失败：语法错误：意外令牌{

任务运行器资源管理器内容：

Nagiviation.vue：

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

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

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

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

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

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

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

webpack.config.js：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

错误可能不是来自

.vue

文件，而是来自

vue loader

本身。如果您使用

vue loader>=13.1

（可能是

vue loader

12个版本之一）然后，您需要确保您的计算机上有

node 6.2

或更高版本，因为

vue loader

使用的功能仅在该版本中可用。您可以通过运行以下命令检查节点版本：

节点--版本

如果无法更新节点版本，请尝试通过执行以下操作安装早期版本的

vue loader

：

npm安装vue-loader@13.0.1--保存开发文件

希望错误会消失

---

作为旁注，您还应该开始使用而不是像现在（或正在）那样使用babel-preset-2015不推荐使用。

您应该为vue安装webpack模板，因为它是为避免人们在配置裸webpack和vue时遇到麻烦而制作的。@samayo我已经尝试过了，但这个模板太过分了。我不需要node.js主机和它的许多其他功能。此外，我想了解所有这些内容，这就是我为什么不需要我需要从头开始，一步一步地自己做，没有任何预制模板。但是，我会查看此模板的配置文件，非常感谢！：）谢谢！我明天会查看此内容。似乎是node.js版本问题。我已从选项中删除Visual Studio预装node.js目录，并添加了

C:\Program Files\nodejs

使用最新版本，现在可以使用了！再次感谢：）从

vue降级-loader@13.5.0

至

vue-loader@13.0.1

帮助解决了我的问题。谢谢！