webpack配置vue

配置vue：

npm install --save vue

import Vue from 'vue'

仅仅是这样还不够，这样在使用Vue时会出现runtime-only错误，因为Vue分为runtime-only（代码中不允许有template）与runtime-compiler（代码中允许template）。

因此还需要一些配置：

//webpack.config.js
module.exports = {
	entry:'...',
	output:{
		...
	},
	module:{
		...
	},
	resolve:{
		alias:{
			'vue$':'vue/dist/vue.js'
		}
	}
}

以上这些代码应该已经能够保证在js文件中使用Vue了，但如果我们想在webpack中使用.vue后缀的文件，还需要做一些配置，否则就会报错：

Module parse failed: D:\Vue\projects\TestProject\vue\cpn.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

需要安装一些拓展的loader：

npm install vue-loader vue-template-compiler --save-dev 

//wenpack.config.js
module: {
        rules: [
            { test:/\.vue$/, loader: 'vue-loader' }   
        ]
    }

如果仍然报错，这是因为vue-loader在14.0版本后需要添加插件支持，因此添加如下配置：

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports  = {
    plugins: [   
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            { test:/\.vue$/, loader: 'vue-loader' }  
        ]
    }
}

也可以直接在package.json中修改vue-loader的版本，重新安装，可以不用配置插件。