[英]Vue-loader Syntax Error: Unexpected token { when importing a component from a js file
[英]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
文件由帶有es2015
預設的babel-loader
。
app.js
被Babel成功轉換成輸出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"
}
}
造成這種神秘錯誤的原因是什么? 人們通常如何調試此類錯誤?
該錯誤可能不是來自您的.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
,因為現在已經(或正在)棄用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.