Vue2中compiler和runtime模式,报错 template compiler is not available.

news/2025/3/17 1:41:16/

vue版本 vue2

错误描述

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

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

main.js代码如下

import Layout from '@/layout/index'new Vue({el: '#app',router,store,// render: h => h(App),//vue 模版编译开启components: { Layout },template: '<Layout/>'
})

原因

vue有两种形式的代码 compiler(模板)模式和 runtime (运行时)模式,vue模块的package.json的main字段默认为runtime模式, 指向了"dist/vue.runtime.common.js"位置。
在我的main.js文件中,初始化vue使用的是compiler模式,所以出现上面的错误信息。

解决办法

1、main.js初始化vue改为runtime模式

new Vue({el: '#app',router,store,render: h => h(App),
})

2、修改vue.config.js配置

增加 runtimeCompiler: true,
runtimeCompiler:是否使用包含运行时编译器的 Vue 构建版本。默认值false,设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。

webpack配置文件里增加 ‘vue$’: ‘vue/dist/vue.esm.js’,
import Vue from ‘vue’ 这行代码被解析为 import Vue from ‘vue/dist/vue.esm.js’,直接指定了文件的位置,没有使用main字段默认的文件位置。

module.exports = {runtimeCompiler: true,configureWebpack: {name: name,resolve: {alias: {'vue$': 'vue/dist/vue.esm.js', //内部为正则表达式  vue结尾的'@': resolve('src')}},}}

http://www.ppmy.cn/news/724350.html

相关文章

LeetCode 2679. Sum in a Matrix【数组,排序】中等

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…

正则 泰文字母

有东南亚业务的正则的时候可能需要校验泰文字母 限制输入&#xff1a;泰文字母和字母 private static final String NUMBER_REGEX "^[\\u0E00-\\u0E7F0-9]{2,12}$";

Linux系统安装中文字体

在项目中要实现文件预览功能&#xff0c;使用OpenOffice将文件转为PDF格式做预览处理&#xff0c;安装并启动openoffice后发现可以预览了&#xff0c;但是中文显示不出来&#xff0c;主要原因是系统上没有安装中文字体&#xff1b; 首先查看系统字体存放路径 cat /etc/fonts/…

Typora字体排版

Typora字体排版 字体样式字体颜色 Typora使用参考设置&#xff1a; 主题&#xff1a;github 偏好设置&#xff1a;内联公式等 字体样式 \字体信息{内容} 字体表达实例罗马体\rm a b c \rm{abc} abc意大利体\it a b c \it{abc} abc等线体\sf a b c \sf{abc} abc打字机体\tt a…

Typora更改字体

环境&#xff1a; MacOS Big Sur 11.1 Typora版本&#xff1a;0.9.9.36 背景介绍&#xff1a; 本文适用于不想重写[css]文件&#xff0c;且只需要更改theme字体的人群。或者通过更改body{font}字段无法成功&#xff1b; 步骤 打开Typora theme folder找到文件<base.user.cs…

泰文utf-8转unicode编码实现

前言:最近的有个项目是要读取泰文然后将泰文叠加到图片上。查了一周的资料,所有的流程已经走通了。 一、实现原理 想要将泰文叠加到图片上需要两个步骤: 泰文转成unicode编码: 泰文实际上是utf-8编码的,这也就是编译器以utf-8的格式才可以正常显示泰文的原因。unicode编…

Linuxqt如何安装中文字体

Linux&qt如何安装中文字体 方法1 将windows下的字体拷贝出来 c:\WINDOWS\Fonts 雅黑&#xff1a;msyh.ttf 黑体&#xff1a;SimHei.ttf 宋体&#xff1a;SimSun.ttf 华文细黑&#xff1a;STXihei.ttf 华文楷体&#xff1a;STKaiti.ttf 安卓默认字库: DroidSansFallback.…

文字和字体

显示文字是本书所要解决的首要问题&#xff0c;现在我们来研究Microsoft Windows中各种有效字体和字体大小的使用方法以及调整文字的方式。 Windows 3.1发表的TrueType使程式写作者和使用者以灵活的方式处理文字的能力大幅增强。TrueType是轮廓字体技术&#xff0c;由Apple Com…