Vue - webpack vue loader yapılandırması

Question

Bir dosya oluşturmak istediğimde hata alıyorum. Bunun nedeni nedir? Görünüşe göre .vue dosyası web paketi tarafından tanınmıyor, ancak web paketi yapılandırma dosyası düzgün görünüyor. webpack hatası

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

uygulama/

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

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

uygulama/app.vue

application.js

<template> 
    <div id="app"> 
    </div> 
</template> 

<script> 

    export default { 
     data() { 
     return { 
      msg: 'Hello from vue-loader!' 
     } 
     } 
    } 

Answer 1

düzgün çalışması Yükleyici belden yapmanız gereken bazı ekstra yapılandırmaları vardır.

Kurulumun tamamı için vue-cli numaralı telefonu kullanmanızı tavsiye ederim. daki webpack.config.js, unuttuğunuz/yapılan hatalara Temelde

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

:

1- Yükleyici adı loader: 'vue-loader' yerine loader: 'vue' olmalıdır.

2- içeriği, resolve adı verilen bir anahtar oluşturma:

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

3- bu anahtar vue: ...loader: babel, gerekli değildir.

Answer 2

ESLint ile vue-cli kullanıyor musunuz? Bunu yaparsanız, son ve noktalı virgüldeki her öğe olayından sonra bir virgül gerekir.

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

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

Answer 3

Vue kullanan projelerde, bireyler webpack ve vue-loader'ı ayrı olarak yapılandırmanızı önermez. Doğrudan vue resmi iskele, vue-cli kullanabilirsiniz. Otomatik olarak yapılandırılmış bu yapılandırmaları dikkate almanız gerekmez.

Sadece Vue öğrenmeye başladıysanız, burada giriş seviyesi bir demo. Sadece küçük bir uygulama olmasına rağmen, ön uç, arka uç da dahil olmak üzere birçok bilgi noktasını (vue2.0 + vue-cli + vue yönlendirici + vuex + axios + mysql + express + pm2 + webpack) kapsar. , veritabanı ve diğer siteler Bazı önemli unsurları benim için, büyük bir önemlilik, birbirimizi teşvik etmek istiyorum! file.It .babelrc` `ayrılmış için es2015 ön ayar taşımak

Vue Demo