Vue - webpack vue-loaderの設定

Question

ファイルをビルドするときはいつもエラーが発生します。その理由は何ですか？ .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!' 
     } 
     } 
    } 

Answer 1

適切に作業をローダーにあなたがする必要があるいくつかの余分なコンフィグがあります。

すべての設定が正常に動作するように、vue-cliを使用することを強くお勧めします。

の1-ローダー名がloader: 'vue-loader'の代わりloader: 'vue'次のようになります。

npm install -g vue-cli 
vue init webpack-simple hello 
cd hello 
npm install 
npm run dev 

は基本的に、あなたのwebpack.config.jsで、あなたが忘れてしまった/エラーがでました。

2 - コンテンツと、resolveというキーを作成します。

alias: { 
    vue$: 'vue/dist/vue.common.js', 
} 

3-およびこのキーvue: ...loader: babelは、必要ありません。

Answer 2

ESLintでvue-cliを使用していますか？ これを行う場合は、最後の要素イベントとセミコロンの後にカンマが必要です。

import Vue from 'vue'; 
import App from './app.vue'; 

new Vue({ 
    el: 'body', 
    components: { App }, 
}); 

Answer 3

vueを使用するプロジェクトでは、webpackとvue-loaderを別々に設定することをおすすめしません。 vue公式の足場、vue-cliを直接使用することができます。これらの構成を考慮する必要はありません。自動的に構成されます。 vue-cli

Vueの学習を始めたばかりの方は、こちらのエントリーレベルのデモをお試しください。それは小規模なアプリケーションですが、フロントエンド、バックエンドを含む多くの知識ポイント（vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack） 、データベースや他のサイト私は必要な要素のいくつかは、大きな意義を学ぶ、お互いを奨励したい！ ` file.It .babelrc`分離にes2015プリセットを移動するための

Vue Demo