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