ファイルを作成したいときはいつでもエラーが発生し続けます。その理由は何ですか? .vueファイルはwebpackで認識できないようですが、webpack構成ファイルは正しく表示されます。 webpackエラー
bundle-app.js 189 kB 1 [emitted] app
+ 12 hidden modules
ERROR in Unexpected token >
@ ./app/application.js 7:11-31
webpack.config.js
var path = require("path");
module.exports = {
context: path.join(__dirname, 'src'),
entry: {
app: './app/application.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle-[name].js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
include: /src/,
query: {
presets: ["es2015"]
}
},
{
test: /\.vue$/,
loader: 'vue',
},
]
},
vue: {
loaders: {
js: 'babel'
}
}
}
package.json
"devDependencies": {
"webpack": "~2.2.1",
"babel-core": "~6.23.1",
"babel-loader": "~6.3.1",
"babel-preset-es2015": "~6.22.0",
"sass-loader": "~6.0.0",
"node-sass": "~4.5.0",
"extract-text-webpack-plugin": "~2.0.0-rc.3",
"vue-template-compiler": "~2.2.4",
"css-loader": "~0.27.3",
"vue-loader": "~11.1.4"
},
"dependencies": {
"vue": "~2.2.4"
}
}
app/application.js
import Vue from 'vue'
import App from './app.vue'
new Vue({
el: 'body',
component: { App }
})
app/app.vue
<template>
<div id="app">
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello from vue-loader!'
}
}
}
ローダーが正しく機能するために必要な追加の構成がいくつかあります。
セットアップはすべて正常に機能するため、vue-cli
を使用することを強くお勧めします。
npm install -g vue-cli
vue init webpack-simple hello
cd hello
npm install
npm run dev
基本的に、webpack.config.js
で、次のエラーを忘れた/作成しました。
1-ローダー名はloader: 'vue-loader'
ではなくloader: 'vue'
にする必要があります。
2-次の内容でresolve
というキーを作成します。
alias: {
vue$: 'vue/dist/vue.common.js',
}
3-そしてこのキーvue: ...loader: babel
は必要ありません。
Vueを使用するプロジェクトでは、個人がwebpackとvue-loaderを別々に構成することをお勧めしません。 vue公式のスキャフォールディング、vue-cliを直接使用できます。自動的に構成されたこれらの構成を考慮する必要はありません。 vue-cli
Vueの学習を始めたばかりの場合は、ここにエントリーレベルのデモがあります。小さなアプリケーションですが、フロントエンド、バックエンドなど、多くの知識ポイント(vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack)をカバーしています。 、データベース、その他のサイト私にとって必要な要素のいくつかは、大きな意味を学び、お互いに励まし合いたいと思っています。
ESLintでvue-cliを使用していますか?その場合、最後とセミコロンのすべての要素イベントの後にコンマが必要です。
import Vue from 'vue';
import App from './app.vue';
new Vue({
el: 'body',
components: { App },
});