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