vue2.6.10+vite2開啟template模板動態(tài)編譯的過程
在從vue-cli遷移到vite2的時候，之前在代碼中使用的模板編譯遇到了問題：
我在項(xiàng)目中會根據(jù)后臺返回的內(nèi)容動態(tài)渲染，如果返回內(nèi)容中有<el-image>等標(biāo)簽，v-html無法識別非html標(biāo)簽，導(dǎo)致圖片渲染失敗，因此希望通過模板編譯的方式，將字符串傳遞給template字段，進(jìn)行渲染。
代碼如下：
<!-- 用來渲染元素的組件 -->
<script lang="jsx">
import Vue from 'vue'
export default {
name: 'renderContent',
props: {
html: String,
elImage: Boolean, // 是否把圖片處理成el-image
},
data () {
return {
}
},
components: {
},
computed: {
},
render(h) {
let htmlString = this.html || ''
if(this.elImage === true) {
// 把res中的updateDesc中的image處理成el-image
// 匹配img的表達(dá)式
let reg1 = new RegExp(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi);
if(htmlString) {
htmlString = htmlString.replace(reg1, function (match, capture) {
return `<el-image src="${capture}" style="max-width: 100%;" fit="contain" :preview-src-list="['${capture}']"></el-image>`
});
}
}
// 進(jìn)行xss過濾
htmlString = this.$utils.xssFilter(htmlString)
const com = Vue.extend({
template: `<div>${htmlString}</div>`
})
return h(com, {})
}
}
</script>此時會遇到報錯：
在vue-cli中，可以通過在vue.config.js中進(jìn)行配置，解決此問題：
module.exports = {
...,
runtimeCompiler: true,
}在vite中，我沒有找到類似于vue-cli中直接進(jìn)行配置的方法，經(jīng)過參考后，發(fā)現(xiàn)可以通過以下方法解決：在vite.config.js中進(jìn)行配置（直接貼我的解決辦法）：
export default defineConfig({
resolve: {
alias: {
...,
"vue": "vue/dist/vue.common.prod.js",
},
},
})因?yàn)関ite默認(rèn)使用的vue是runtime-only的，所以通過聲明使用其他版本的vue來解決（具體vue 文件的名稱根據(jù)版本有差別，我使用的版本是vue2.6.10）
各個版本的大小和功能略有差異，大家選擇自己合適的就行。
其他的解決方案：使用web-component 自定義<el-image> 節(jié)點(diǎn)等。
參考文章：
Vue 能否實(shí)現(xiàn)動態(tài)編譯template模板？
到此這篇關(guān)于vue2.6.10+vite2開啟template模板動態(tài)編譯的文章就介紹到這了,更多相關(guān)vue開啟template模板動態(tài)編譯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue下history模式刷新后404錯誤解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
基于vue-cli配置lib-flexible + rem實(shí)現(xiàn)移動端自適應(yīng)
這篇文章主要介紹了基于vue-cli配置lib-flexible + rem實(shí)現(xiàn)移動端自適應(yīng),需要的朋友可以參考下2017-12-12
這篇文章主要給大家介紹了關(guān)于vue3如何通過ref獲取元素離頂部的距離,文中通過代碼以及圖文介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價值,需要的朋友可以參考下2023-10-10
typescript 為 javaScript的超集，這意味著它支持所有都JavaScript都語法。這篇文章主要介紹了vue框架中props的typescript用法,需要的朋友可以參考下2020-02-02
vue中element 上傳功能的實(shí)現(xiàn)思路
這篇文章主要介紹了vue中element 的上傳功能的實(shí)現(xiàn)思路,本文大概通過兩種實(shí)現(xiàn)思路，具體內(nèi)容詳情大家跟隨腳本之家小編一起看看吧2018-07-07
Vue中使用addEventListener添加事件、removeEventListener移除事件的示例詳解
最近在項(xiàng)目中需要用到addEventListener監(jiān)聽滾動條滾動的高度，所以就研究了一下在vue中是怎么進(jìn)行事件監(jiān)聽的，添加事件和移除事件結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-12-12
這篇文章主要介紹了vue 巧用過渡效果(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關(guān)于VUE登錄注冊頁面的相關(guān)資料,在Vue中可以使用組件來構(gòu)建登錄注冊頁面,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
Vue創(chuàng)建淺層響應(yīng)式數(shù)據(jù)的實(shí)例詳解
這篇文章主要介紹了Vue創(chuàng)建淺層響應(yīng)式數(shù)據(jù)的實(shí)例,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
vue3.2?Composition?API項(xiàng)目依賴升級
這篇文章主要為大家介紹了vue3.2?Composition?API項(xiàng)目依賴升級示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08