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