Vue - webpack vue-loader configuration

There are some extra configs that you need to do, to loader work properly.

I strongly recommend you using the vue-cli for setup all working okay.

npm install -g vue-clivue init webpack-simple hellocd hellonpm installnpm run dev

Basically, at your webpack.config.js, you forgot/made errors in:

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

2- Create an key called resolve, with the content:

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

3- And this key vue: ...loader: babel, isn't necessary.

In projects that use vue, individuals do not recommend configuring webpack and vue-loader separately. You can directly use vue official scaffolding, vue-cli. Do not have to consider these configurations, automatically configured.vue-cli

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

Vue Demo

Are you using vue-cli with ESLint?If you do, you need a comma after every element event in the last and the semicolon.

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