当前位置: 首页 > news >正文

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available

步骤:

1. 项目中安装vue:

npm install vue -S

 2. main.js中引入vue,创建vue实例:

import Vue from 'vue'
const vm = new Vue({
  el: '#app',
  data: {
    msg: 'hello vue'
  }
});

3.  index.html中加入vue实例挂载的DOM节点:

<div id="app">
  {{msg}}
</div>

 4. 终端执行:

npm run dev

编译成功,但是浏览器中报错: 

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

官方解释:

如果 render 函数和 template property 都不存在,挂载 DOM 元素的 HTML 会被提取出来用作模板,此时,必须使用 Runtime + Compiler 构建的 Vue 库。

此时我们应该使用runtime-compiler,而不是runtime-only。

官网给出了以下解决办法:

https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6

 在这里我采用在webpack.config.js中增加resolve配置的方式:

  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm.js'
    }
  }

重新执行npm run dev,刷新页面,不再报错,且页面正常渲染。

 

相关文章:

  • Webpack5无法使用uglifyjs-webpack-plugin压缩js: ERESOLVE unable to resolve dependency tree
  • VSCode中去除换行
  • Failed to compile../src/views/sagc/component/EchartLine.vue?vuetype=scriptlang=js (./node_modul
  • VSCode替换掉/去掉空行
  • Vue Router构建选项linkActiveClass全局配置菜单高亮显示遇到的问题:默认第一个router-link高亮,点击第2个router-link第一个高亮不会被去除
  • vue params传参注意事项:使用命名路由,才能将传入的参数显示到url地址上
  • VSCode通过源代码管理插件GitLens提交项目代码的过程
  • vue页面加载默认进入vue-router嵌套子路由,并使用keep-alive对组件进行缓存
  • vue keep-alive prop exclude使用小坑:使用逗号分隔字符串时不能加空格
  • 原生JavaScript的面向过程和面向对象
  • 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1,因为在此系统中禁止执行脚本。有关详细信息,请参阅 “get-help about_s
  • vue-router.esm.js?ac56:2316 TypeError: Cannot create property ‘_Ctor‘ on string ‘H‘
  • vue-router.esm.js?ac56:2316 TypeError: Cannot read properties of undefined (reading ‘$createElement‘
  • VSCode中git上传遇到 “在签出前,请清理存储库工作树。”问题解决
  • vue cli关闭eslint语法检查
  • 【vuex入门系列02】mutation接收单个参数和多个参数
  • Git 使用集
  • gitlab-ci配置详解(一)
  • JavaScript工作原理(五):深入了解WebSockets,HTTP/2和SSE,以及如何选择
  • jQuery(一)
  • JS 面试题总结
  • Laravel深入学习6 - 应用体系结构:解耦事件处理器
  • mysql常用命令汇总
  • python 学习笔记 - Queue Pipes,进程间通讯
  • react-core-image-upload 一款轻量级图片上传裁剪插件
  • Spring思维导图,让Spring不再难懂(mvc篇)
  • TypeScript实现数据结构(一)栈,队列,链表
  • Web设计流程优化:网页效果图设计新思路
  • 阿里云Kubernetes容器服务上体验Knative
  • 前端相关框架总和
  • 收藏好这篇,别再只说“数据劫持”了
  • 【运维趟坑回忆录 开篇】初入初创, 一脸懵
  • 阿里云服务器如何修改远程端口?
  • ​软考-高级-系统架构设计师教程(清华第2版)【第20章 系统架构设计师论文写作要点(P717~728)-思维导图】​
  • #快捷键# 大学四年我常用的软件快捷键大全,教你成为电脑高手!!
  • #使用清华镜像源 安装/更新 指定版本tensorflow
  • (20)目标检测算法之YOLOv5计算预选框、详解anchor计算
  • (Java数据结构)ArrayList
  • (libusb) usb口自动刷新
  • (Redis使用系列) SpringBoot 中对应2.0.x版本的Redis配置 一
  • (安卓)跳转应用市场APP详情页的方式
  • (三)Pytorch快速搭建卷积神经网络模型实现手写数字识别(代码+详细注解)
  • (算法)前K大的和
  • (原創) 如何讓IE7按第二次Ctrl + Tab時,回到原來的索引標籤? (Web) (IE) (OS) (Windows)...
  • (转) Face-Resources
  • (转)大道至简,职场上做人做事做管理
  • (转)真正的中国天气api接口xml,json(求加精) ...
  • (转载)hibernate缓存
  • .bat批处理(一):@echo off
  • .htaccess配置常用技巧
  • .mat 文件的加载与创建 矩阵变图像? ∈ Matlab 使用笔记
  • .Net IE10 _doPostBack 未定义
  • .NET 中 GetProcess 相关方法的性能
  • .NET企业级应用架构设计系列之应用服务器
  • .net知识和学习方法系列(二十一)CLR-枚举