webpack配置起来确实麻烦,这不,之前用刚配好了vue1+的版本,结果在(部分)安卓机上测试,发现存在开启热加载(dev-server)的情况下不能识别vue语法的问题,试了很多方法,都没能很好的解决,最后索性将vue升级到2+,竟然就能识别了,好吧!

1.先分享一下webpack配置vue2+的一些不同(本人亲测):

(1)dependencies中的vue默认安装2+,直接运行,会报如下错:[Vue warn]: Failed to mount component: template or render function not defined。
如果dependencies中的vue选择^1.0.26,那么devDependencies中对应的vue-loader最好选择^7.3.0,vue-hot-reload-api最好选择^1.2.0,否则就会报错。
(2)如果vue选择安装1+,dependencies中的vue-router最好选择^0.7.13(默认安装2+,无法识别router.map()这个方法)。
(3)如果vue选择安装1+,dependencies中的vue-validator最好选择^2.0.0(默认安装2.1.7)。
(4)如果vue选择安装1+,后面在开启webpack dev server的时候,处于同一内网中的安卓手机访问本地设备的输出页面会出现不识别vue语法的兼容问题,ios手机可以正常访问和解析,但是开启别的server再来访问并不会出现这种兼容问题,所以为了测试方便,建议vue选择安装2.0的版本。
(5)如果vue选择安装2+,vue2.0有两种构建模式,默认情况下运行构建,但是不能解析单文件的template模板,所以要使用独立构建,需要在alias中指定vue$的模块别名地址,即

电脑培训,计算机培训,平面设计培训,网页设计培训,美工培训,Web培训,Web前端开发培训
// 其他解决方案 resolve: { // require时省略的扩展名,遇到.vue结尾的也要去加载 extensions: ['','.js', '.vue'], // 模块别名地址,方便后续直接引用别名,无须写长长的地址,注意如果后续不能识别该别名,需要先设置root root:"../node_modules",
    alias:{ 'vue$':'vue/dist/vue.js' }
}, 

网友评论