vue报[Vue warn]: You are using th

转载至https://blog.csdn.net/anzhang110/article/details/107100880/

1.错误截图

使用命令 npm run serve 后，项目可正常启动，控制台未报错，可是在浏览器中输入地址访问时，发现页面空白，F12查看控制台发现输出如上错误警告。

原因分析

vue有两种形式的代码模式，即compiler（模板）模式和runtime模式（运行时），package.json的main字段默认为runtime模式， 指向了"dist/vue.runtime.common.js"位置。而我的main.js中引入了template，这种属于compiler模式，所以就报出了如上的错误提示。

解决方法

方法一：

修改main.js,修改后代码如下:

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