Vue-webpack vue-loader configuration

Question

I get an error all the time when I want to create a file. What is the reason for this? It seems that the .vue file is not recognized by webpack, but the webpack configuration file looks correct. Web Package Error

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

application / 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

There are several additional configurations that you need to make for the bootloader to work correctly.

I highly recommend you use vue-cli to configure all the work.

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

Basically, on your webpack.config.js you forgot / made mistakes in:

1- The bootloader name should be loader: 'vue-loader' instead of loader: 'vue' .

2- Create a key called resolve , with the contents:

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

3- And this key is vue: ...loader: babel not needed.

Answer 2

In projects that use vue, people do not recommend separately setting up webpack and vue-loader. You can directly use the official vue, vue-cli scaffolding. You do not need to consider these configurations that are automatically configured. vue-cli

If you have just started learning Vue, here is an entry-level demo. Although this is just a small application, it covers many knowledge points (vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack), including front-end, back-end, database and others sites. Some of the necessary elements, for me, studying great importance, would like to encourage each other!

Vue demo

Answer 3

Do you use vue-cli with ESLint? If you do this, you will need a comma after each event of the element in the last and a semicolon.

 import Vue from 'vue'; import App from './app.vue'; new Vue({ el: 'body', components: { App }, });