使用模板字符串template:``,vue本地运行、vite打包发布后内容不显示。vben admin 本地运行可以显示,发布后内容不显示问题
问题描述
使用的是vben admin 框架 官网地址;在defineComponent 里面使用 字符串模板template,本地运行可以正常显示模板内容,打包发布后模板内容无法显示。打包发布后使用标签的页面内容可以正常显示。因项目要求前端根据后台返回部分前端代码动态生成界面实现功能;考虑使用 字符串模板template 实现功能,本地历经千险实现效果后,在发布后又发现字符串模板template 里面的内容无法展示,其他使用标签的内容可以正常显示。
本地运行效果
打包后效果:
vue 相关问题解决
使用vue-cli 进行构建即使本地运行也不会显示,基于此发现的我那个问题契机
找了一大圈发现在官网上面其实有相关介绍:
https://cn.vuejs.org/guide/scaling-up/tooling.html#project-scaffolding
具体配置:
Vue有 runtime-compiler与runtime-only 两种编译模式,默认启用的是runtime-only ,在这种模式下不能使用template参数,需要在vue.config.js 配置属性runtimeCompiler: true
使用vue-cli 进行构建,项目根目录下面建立 vue.config.js 配置一个属性
module.exports = {
runtimeCompiler: true // 运行时编译
}
一定注意配置需要重启项目!!!
查找到的相关文章:
https://www.jianshu.com/p/4586bb08891f
https://blog.csdn.net/huangpb123/article/details/122753934// 这篇文章写得比较简单全面,就是我的神啊,还有其他版本的vue2, 项目中对应修改可以参照
vite相关问题解决
也就是我所使用的vben admin 所使用的 vite构建工具
与vue同理,使用vite构建工具的情况下,默认使用的是 vue.runtime.esm-bundler.js 这个仅运行时版本,不能处理 template 选项是字符串的情况,template 选项是字符串的情况要使用包含运行时编译器的版本 vue.esm-bundler.js。
使用vite 构建: 项目根目录下面建立 vite.config.js配置别名,在resolve.alias下进行配置;官方文档
具体配置:
resolve: {
alias: [
{
find: 'vue', // 解决动态模板发布后不显示问题
replacement: 'vue/dist/vue.esm-bundler.js',
},
],
},
或者
alias: {
'vue': 'vue/dist/vue.esm-bundler.js'
},
配置好后重新打包发布问题解决