解決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ā)現(xiàn)好用啦~
補充知識：vue關于build和config文件都已修改，但打包后圖片仍找不到的問題
最開始發(fā)現(xiàn)有的圖片可以加載出來有的卻不能，然后去看build和config文件的配置，
都很ok啊。
然后去看那些可以加載出來的跟不能加載的做了對比，發(fā)現(xiàn)不能加載出來的都是把路徑寫在js里面，用變量的方式寫進html里面的，最后的解決方式就是：
//以require形式導入圖片
url:require('../../static/xxx.png')
然后打包就沒問題了；
后面再補充一下，background屬性引入圖片的話如果以行內元素引入也會造成圖片路徑找不到的情況，解決的辦法就是把它寫在style里面，以類名的方式引入；
總結一下，vue里面引用圖片在打包后仍能正常使用的正確引用方式：
html內：img src以相對路徑引入；
css：style以background屬性作為背景圖片引入，需以類名方式引入，行內樣式可能會不生效；
js：以require('…/url')引入，賦予變量；
以上這篇解決vue項目 build之后資源文件找不到的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue中$on和$emit的實現(xiàn)原理分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Electron-vue腳手架改造vue項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了vue axios 封裝請求攔截多次彈窗的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue.js 實現(xiàn)微信公眾號菜單編輯器功能(二)
這篇文章主要介紹了Vue.js 實現(xiàn)微信公眾號菜單編輯器功能，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
Vue使用axios發(fā)送請求并實現(xiàn)簡單封裝的示例詳解
這篇文章主要介紹了Vue使用axios發(fā)送請求并實現(xiàn)簡單封裝,主要包括安裝axios及簡單使用配置方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單全選和反選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
Vant是一套輕量、可靠的移動端組件庫,通過Vant可以快速搭建出風格統(tǒng)一的頁面,提升開發(fā)效率,下面這篇文章主要給大家介紹了關于Vant2移動端Vue組件庫問題的相關資料,需要的朋友可以參考下2023-01-01
斗魚直播是比較火的直播視頻，想必大家都看過吧。這篇文章主要介紹了Vue-cli-webpack搭建斗魚直播步驟詳解,需要的朋友可以參考下2017-11-11
本文主要給大家介紹基于vue的分頁原生寫法，代碼分為html部分和js部分，簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03
這篇文章主要介紹了vue中如何使用ztree,包括配置package.json，自動加載jquery的方法，本文給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2018-02-02