開發時一切正常，但是一旦我為生產匯出 1 個組件就不會呈現，而是被替換為 <!--->
經過一番除錯，我發現這是因為 require()
我的圖片帶有如下所示的動態 URL：
:src="require(`@/assets/path/${variable}`)"
這在開發中有效，但是一旦我為生產構建應用程式，組件就不會呈現。
當我用
src="@/assets/path/file.png"
該組件顯示并正常作業
我可以在 vue.config.js 中提供給 webpack 的東西嗎？
有沒有辦法在沒有 require() 的情況下在路徑中使用變數？
uj5u.com熱心網友回復：
v-bind中的運算式在運行時執行，webpack 別名在編譯時執行。
將 require() 從 html 模板移至 data() ，它應該可以在生產中使用。
簡單的例子：
<template>
<img :src="getImg" />
</template>
<script>
export default {
name: 'Example',
data() {
return {
file: 'image',
}
},
methods: {
getImg() {
return require(`@/assets/images/${this.file}.png`)
},
},
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/474857.html
標籤：Vue.js 网页包 Vue组件 Vuejs3 vue-composition-api