1.错误截图
使用命令 npm run serve 后,项目可正常启动,控制台未报错,可是在浏览器中输入地址访问时,发现页面空白,F12查看控制台发现输出如上错误警告。
定位出错位置
出错位置位于项目根目录下main.js文件中,代码如下:
''''
'''
new Vue({
el: '#app',
// store,
router,
components: { App },
template: '<App/>'
})
以上代码是我准备基于京东风格NutUi库写一个登录页面的demo,通过查询大神的博客后,方知晓出现上述错误是因为我在main.js的初始化vue实例是引入了template属性;
原因分析
vue有两种形式的代码模式,即compiler(模板)模式和runtime模式(运行时),package.json的main字段默认为runtime模式, 指向了"dist/vue.runtime.common.js"位置。而我的main.js中引入了template,这种属于compiler模式,所以就报出了如上的错误提示。
解决方法
方法一:
修改main.js,修改后代码如下:
.....
.....
/* eslint-disable no-new */
new Vue({
el: '#app',
// store,
router,
render: h =>h(App)
}).$mount("#app")
方法二:
在main.js 中重新引入vue;
import Vue from 'vue/dist/vue.esm.js'
方法三:
修改webpack.conf.js文件中vue所指向的js;
configureWebpack: {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
方法四:
在webpack.conf.js 中修改如下配置:
module.exports = {
runtimeCompiler: true,
......
初来乍到,如有错误之处还望不吝赐教。