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

最新推荐文章于 2023-06-18 20:56:26 发布

原创最新推荐文章于 2023-06-18 20:56:26 发布 · 4.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

1 篇文章

订阅专栏

本文解析了一个Vue项目启动后页面空白的问题，错误源于main.js中Vue实例配置的template属性与项目默认的runtime模式冲突。文章详细分析了错误原因，并提供了四种解决方案，包括修改Vue实例创建方式、重新引入Vue、修改webpack配置以及启用runtimeCompiler选项。

错误原因分析

1.错误截图

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

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