vue报[Vue warn]: You are using the runtime-only..........错误

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, 
		......
		

初来乍到，如有错误之处还望不吝赐教。