Vue - webpack vue-loader Konfiguration

Question

Ich bekomme immer Fehler, wenn ich eine Datei erstellen möchte. Was ist ein Grund dafür? Es scheint, dass die .vue-Datei vom Webpack nicht erkannt wird, aber die webpack-Konfigurationsdatei ordnungsgemäß angezeigt wird. webpack Fehler

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

Es gibt einige zusätzliche Konfigurationen, die Sie tun müssen, die Arbeit richtig Lader.

Ich empfehle dringend die Verwendung der vue-cli für die Einrichtung alles in Ordnung funktioniert.

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

Grundsätzlich bei Ihrer webpack.config.js, Sie haben vergessen/gemacht Fehler in:

1- Loader Name sollte loader: 'vue-loader' statt loader: 'vue' sein.

2- Einen Schlüssel resolve, mit dem Inhalt genannt:

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

3- Und dieser Schlüssel vue: ...loader: babel, nicht notwendig ist.

Answer 2

Verwenden Sie vue-cli mit ESLint? Wenn Sie dies tun, benötigen Sie nach jedem Element-Ereignis in der letzten und dem Semikolon ein Komma.

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

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

Answer 3

In Projekten, die vue verwenden, wird empfohlen, Webpack und Vue-Loader nicht separat zu konfigurieren. Sie können direkt das vue offizielle Gerüst, vue-cli, verwenden. Sie müssen diese Konfigurationen nicht automatisch konfigurieren. vue-cli

Wenn Sie gerade angefangen haben, Vue zu lernen, hier ist eine Einsteiger-Demo. Obwohl es nur eine kleine Anwendung ist, deckt es viele Wissenspunkte ab (vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack), einschließlich Front-End, Back-End , Datenbank und andere Seiten Einige der notwendigen Elemente, für mich, lernen große Bedeutung, möchten sich gegenseitig ermutigen!

Vue Demo