本文將詳細(xì)介紹在更新Vue CLI 5后，當(dāng)在Less中使用public路徑下的資產(chǎn)時(shí)出現(xiàn)報(bào)錯(cuò)的情況，并提供了解決方法和相關(guān)參考鏈接。
最近，許多開(kāi)發(fā)者在將Vue CLI升級(jí)至版本5后，遇到了一個(gè)問(wèn)題：使用Less編寫(xiě)樣式時(shí)，如果引用了public路徑下的資產(chǎn)（如圖片），會(huì)導(dǎo)致報(bào)錯(cuò)。
這個(gè)問(wèn)題的根本原因是新的Vue CLI版本中使用的css-loader默認(rèn)將"/a.png"解析為"require('/a.png')"，從而導(dǎo)致了錯(cuò)誤。接下來(lái)，將介紹如何解決這個(gè)問(wèn)題。
解決方法：配置vue.config.js文件
要解決在Less中使用public路徑下資產(chǎn)報(bào)錯(cuò)的問(wèn)題，需要對(duì)vue.config.js進(jìn)行一些配置。
在vue.config.js文件中添加以下代碼，即可解決問(wèn)題
css: {
loaderOptions: {
css: {
url: {
filter: url => url[0] !== '/'
}
}
}
}保存vue.config.js文件，并重新啟動(dòng)項(xiàng)目?，F(xiàn)在，在Less中使用public路徑下的資產(chǎn)時(shí)應(yīng)該不再報(bào)錯(cuò)了。文章來(lái)源：http://www.zghlxwxcb.cn/article/531.html
參考鏈接
https://github.com/vuejs/vue-cli/issues/7032
通過(guò)以上解決方法，應(yīng)該能夠解決在更新Vue CLI 5后，在Less中使用public路徑下資產(chǎn)報(bào)錯(cuò)的問(wèn)題。希望本文對(duì)你解決Vue CLI5問(wèn)題有所幫助！文章來(lái)源地址http://www.zghlxwxcb.cn/article/531.html
到此這篇關(guān)于如何解決更新Vue CLI 5后，在Less中使用public路徑下資產(chǎn)報(bào)錯(cuò)的問(wèn)題的文章就介紹到這了,更多相關(guān)內(nèi)容可以在右上角搜索或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![使用vscode在vue項(xiàng)目中重命名文件選擇了更新導(dǎo)入路徑仍有部分導(dǎo)入路徑?jīng)]有更新](https://imgs.yssmx.com/Uploads/2024/02/654187-1.png)
