解決vue項(xiàng)目 build之后資源文件找不到的問(wèn)題
解決靜態(tài)資源失效的問(wèn)題
這就需要修改我們的 config 中的 index.js了，默認(rèn)的build 中的部分是這樣的：
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
修改之后的應(yīng)為這樣的:
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
但是這樣能確保資源文件可被正常找到, 但頁(yè)面還是處于白屏狀態(tài),
在路由頁(yè)面找到mode: 'history',
export default new Router({
mode: 'history',
routes: [
將mode: 'history',這句話刪除,在進(jìn)行build,
export default new Router({
// mode: 'history',
routes: [
小伙伴們, 是不是發(fā)現(xiàn)好用啦~
補(bǔ)充知識(shí)：vue關(guān)于build和config文件都已修改，但打包后圖片仍找不到的問(wèn)題
最開(kāi)始發(fā)現(xiàn)有的圖片可以加載出來(lái)有的卻不能，然后去看build和config文件的配置，
都很ok啊。
然后去看那些可以加載出來(lái)的跟不能加載的做了對(duì)比，發(fā)現(xiàn)不能加載出來(lái)的都是把路徑寫(xiě)在js里面，用變量的方式寫(xiě)進(jìn)html里面的，最后的解決方式就是：
//以require形式導(dǎo)入圖片
url:require('../../static/xxx.png')
然后打包就沒(méi)問(wèn)題了；
后面再補(bǔ)充一下，background屬性引入圖片的話如果以行內(nèi)元素引入也會(huì)造成圖片路徑找不到的情況，解決的辦法就是把它寫(xiě)在style里面，以類名的方式引入；
總結(jié)一下，vue里面引用圖片在打包后仍能正常使用的正確引用方式：
html內(nèi)：img src以相對(duì)路徑引入；
css：style以background屬性作為背景圖片引入，需以類名方式引入，行內(nèi)樣式可能會(huì)不生效；
js：以require('…/url')引入，賦予變量；
以上這篇解決vue項(xiàng)目 build之后資源文件找不到的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+elementUI實(shí)現(xiàn)表格關(guān)鍵字篩選高亮
這篇文章主要為大家詳細(xì)介紹了vue+elementUI實(shí)現(xiàn)表格關(guān)鍵字篩選高亮，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
一步步教你利用webpack如何搭一個(gè)vue腳手架（超詳細(xì)講解和注釋）
這篇文章主要給大家介紹了軟玉利用webpack如何搭一個(gè)vue腳手架的相關(guān)資料，文中有超詳細(xì)講解和注釋，對(duì)大家學(xué)習(xí)或者使用webpack具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
解決vue scoped html樣式無(wú)效的問(wèn)題
這篇文章主要介紹了解決vue scoped html樣式無(wú)效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要給大家介紹了關(guān)于Vue2.x和Vue3.x的雙向綁定原理的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Vue實(shí)現(xiàn)移除數(shù)組中特定元素的方法小結(jié)
這篇文章主要介紹了Vue如何優(yōu)雅地移除數(shù)組中的特定元素,文中介紹了單個(gè)去除和批量去除的操作方法,并通過(guò)代碼示例講解的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了在VUE style中使用data中的變量的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
unplugin-auto-import與unplugin-vue-components安裝問(wèn)題解析
這篇文章主要為大家介紹了unplugin-auto-import與unplugin-vue-components問(wèn)題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了如何在vue 中使用柱狀圖 并自修改配置，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定原理
這篇文章主要介紹了proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定原理,文章以介紹proxy的優(yōu)點(diǎn)開(kāi)始展開(kāi)全文內(nèi)容，圍繞proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定的相關(guān)資料，,需要的朋友可以參考一下2021-12-12
vue如何封裝自己的Svg圖標(biāo)組件庫(kù)(svg-sprite-loader)
這篇文章主要介紹了vue如何封裝自己的Svg圖標(biāo)組件庫(kù)(svg-sprite-loader)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04