vue2.6.10+vite2開(kāi)啟template模板動(dòng)態(tài)編譯的過(guò)程
在從vue-cli遷移到vite2的時(shí)候，之前在代碼中使用的模板編譯遇到了問(wèn)題：
我在項(xiàng)目中會(huì)根據(jù)后臺(tái)返回的內(nèi)容動(dòng)態(tài)渲染，如果返回內(nèi)容中有<el-image>等標(biāo)簽，v-html無(wú)法識(shí)別非html標(biāo)簽，導(dǎo)致圖片渲染失敗，因此希望通過(guò)模板編譯的方式，將字符串傳遞給template字段，進(jìn)行渲染。
代碼如下：
<!-- 用來(lái)渲染元素的組件 -->
<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過(guò)濾
htmlString = this.$utils.xssFilter(htmlString)
const com = Vue.extend({
template: `<div>${htmlString}</div>`
})
return h(com, {})
}
}
</script>此時(shí)會(huì)遇到報(bào)錯(cuò)：
在vue-cli中，可以通過(guò)在vue.config.js中進(jìn)行配置，解決此問(wèn)題：
module.exports = {
...,
runtimeCompiler: true,
}在vite中，我沒(méi)有找到類似于vue-cli中直接進(jìn)行配置的方法，經(jīng)過(guò)參考后，發(fā)現(xiàn)可以通過(guò)以下方法解決：在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的，所以通過(guò)聲明使用其他版本的vue來(lái)解決（具體vue 文件的名稱根據(jù)版本有差別，我使用的版本是vue2.6.10）
各個(gè)版本的大小和功能略有差異，大家選擇自己合適的就行。
其他的解決方案：使用web-component 自定義<el-image> 節(jié)點(diǎn)等。
參考文章：
Vue 能否實(shí)現(xiàn)動(dòng)態(tài)編譯template模板？
到此這篇關(guān)于vue2.6.10+vite2開(kāi)啟template模板動(dòng)態(tài)編譯的文章就介紹到這了,更多相關(guān)vue開(kāi)啟template模板動(dòng)態(tài)編譯內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過(guò)圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2023-03-03
Vue實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車案例
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
vue.js實(shí)現(xiàn)含搜索的多種復(fù)選框（附源碼）
這篇文章主要給大家介紹了利用vue.js實(shí)現(xiàn)含搜索的多種復(fù)選框的相關(guān)資料，文中給出了簡(jiǎn)單的介紹，但提供了完整的實(shí)例源碼供大家下載學(xué)習(xí)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-03-03
Vue3中關(guān)于getCurrentInstance的大坑及解決
這篇文章主要介紹了Vue3中關(guān)于getCurrentInstance的大坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了.html頁(yè)面引入vue并使用公共組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
使用vue3+TS實(shí)現(xiàn)簡(jiǎn)易組件庫(kù)的全過(guò)程
當(dāng)市面上主流的組件庫(kù)不能滿足我們業(yè)務(wù)需求的時(shí)候,那么我們就有必要開(kāi)發(fā)一套屬于自己團(tuán)隊(duì)的組件庫(kù),下面這篇文章主要給大家介紹了如何使用vue3+TS實(shí)現(xiàn)簡(jiǎn)易組件庫(kù)的相關(guān)資料,需要的朋友可以參考下2022-03-03
vue項(xiàng)目多租戶環(huán)境變量的設(shè)置
本文主要介紹了vue項(xiàng)目多租戶環(huán)境變量的設(shè)置，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue路由切換和Axios接口取消重復(fù)請(qǐng)求詳解
在web項(xiàng)目開(kāi)發(fā)的過(guò)程中,經(jīng)常會(huì)遇到客服端重復(fù)發(fā)送請(qǐng)求的場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于Vue路由切換和Axios接口取消重復(fù)請(qǐng)求的相關(guān)資料,需要的朋友可以參考下2022-05-05
@error函數(shù)vue圖片加載失敗空白頁(yè)解決方案
這篇文章主要介紹了@error函數(shù)vue圖片加載失敗空白頁(yè)解決方案，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了手寫實(shí)現(xiàn)Vue計(jì)算屬性，本文從一個(gè)簡(jiǎn)單的計(jì)算屬性例子開(kāi)始，一步步實(shí)現(xiàn)了計(jì)算屬性。并且針對(duì)這個(gè)例子，詳細(xì)分析了頁(yè)面渲染時(shí)的整個(gè)代碼執(zhí)行邏輯，需要的小伙伴可以參考一下2022-08-08