vue打包相關(guān)細(xì)節(jié)整理(小結(jié))
項(xiàng)目在dev環(huán)境下運(yùn)行沒有問題，打包之后就各種報(bào)錯(cuò)一下來整理一下遇到的問題
1、打包好的網(wǎng)頁無法訪問static目錄的資源
原因是下載官方的cli時(shí)，默認(rèn)設(shè)置是根據(jù)絕對路徑來定位資源目錄的，這樣就非常方便在dev環(huán)境下進(jìn)行本地調(diào)試，但是在打包部署之后，就需要通過相對路徑來訪問靜態(tài)資源了，修改方法很簡單，在config/index.js文件文件中，定位到
把a(bǔ)ssetsPublicPath的value改成‘./'，修改之后，打包生成的文件，對資源的引用路徑會(huì)在路徑前面加上‘./'，這樣就可以找到對應(yīng)的資源文件了
2、可以找到靜態(tài)資源文件，但是在css文件中的引用的資源并沒有找到
原因是打包的時(shí)候，所有static文件下的資源都是加工，生成文件名加上hashcode為新命名的文件，例如css文件中引用了ttf（字體文件）,由于ttf文件在打包之后加工成xxx+hashcode.ttf文件，原本的css文件的引用當(dāng)然會(huì)找不到加工后的ttf文件。
解決的方法就是通過修改build/util.js文件的
，添加publicPath：‘../../'
我們會(huì)發(fā)現(xiàn)打包后的css文件，對ttf文件的引用路徑自動(dòng)加上了hashcode，完美解決css引用外部資源失效的問題
3、圖片，MP4，字體等資源比較大，超過限制，導(dǎo)致文件沒有被打包進(jìn)去，可以通過\build\webpack.base.conf.js
，
修改對文件的大小限制
4、打包后，css樣式和測試環(huán)境的不一樣，原因是打包之后的css文件調(diào)用順序發(fā)生錯(cuò)亂了，
所有第三方庫的css文件在引入的時(shí)候，務(wù)必在App文件引入之前引入，以上只是main.js文件的改法，可以根據(jù)需要來修改對應(yīng)的js文件
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- vue打包后顯示空白正確處理方法
- Vue打包后出現(xiàn)一些map文件的解決方法
- 使用vue打包時(shí)vendor文件過大或者是app.js文件很大的問題
- vue打包使用Nginx代理解決跨域問題
- 解決vue打包項(xiàng)目后刷新404的問題
- 解決vue打包之后靜態(tài)資源圖片失效的問題
- 解決Vue打包之后文件路徑出錯(cuò)的問題
- vue打包之后生成一個(gè)配置文件修改接口的方法
- 解決vue打包c(diǎn)ss文件中背景圖片的路徑問題
- 解決vue打包后vendor.js文件過大問題
- 解決vue打包后刷新頁面報(bào)錯(cuò)：Unexpected token <
- 解決Vue打包后訪問圖片/圖標(biāo)不顯示的問題
- vue打包的時(shí)候自動(dòng)將px轉(zhuǎn)成rem的操作方法
- 詳解Vue打包優(yōu)化之code spliting
- 基于vue打包后字體和圖片資源失效問題的解決方法
- Vue打包后訪問靜態(tài)資源路徑問題
- 解決Vue打包上線之后部分CSS不生效的問題
- 壓縮Vue.js打包后的體積方法總結(jié)(Vue.js打包后體積過大問題)
相關(guān)文章
element多個(gè)表單校驗(yàn)的實(shí)現(xiàn)
在項(xiàng)目中，經(jīng)常會(huì)遇到表單檢驗(yàn)，在這里我分享在實(shí)際項(xiàng)目中遇到多個(gè)表單同時(shí)進(jìn)行校驗(yàn)以及我的解決方法，感興趣的可以了解一下2021-05-05
這篇文章主要介紹了在vue路由上添加公共的路由前綴方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
ruoyi-vue3 集成aj-captcha實(shí)現(xiàn)滑塊、文字點(diǎn)選驗(yàn)證碼功能
這篇文章主要介紹了 ruoyi-vue3 集成aj-captcha實(shí)現(xiàn)滑塊、文字點(diǎn)選驗(yàn)證碼,本文基于后端RuoYi-Vue 3.8.7 和 前端 RuoYi-Vue3 3.8.7,集成以AJ-Captcha文字點(diǎn)選驗(yàn)證碼為例,不需要鍵盤手動(dòng)輸入,極大優(yōu)化了傳統(tǒng)驗(yàn)證碼用戶體驗(yàn)不佳的問題,感興趣的朋友一起看看吧2023-12-12
antd配置config-overrides.js文件的操作
這篇文章主要介紹了antd配置config-overrides.js文件的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue?echarts實(shí)現(xiàn)改變canvas長和寬自適應(yīng)
這篇文章主要介紹了vue?echarts實(shí)現(xiàn)改變canvas長和寬自適應(yīng)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue是前端輕量級(jí)MVVM框架,入門門檻相對較低,今天用Vue做一個(gè)購物車實(shí)例,所以下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)購物車全部功能的簡單方法,需要的朋友可以參考下2021-07-07
這篇文章主要為大家詳細(xì)介紹了vue右鍵菜單的簡單封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
如何在vue3.0+中使用tinymce及實(shí)現(xiàn)多圖上傳文件上傳公式編輯功能
本文給大家分享tinymce編輯器如何在vue3.0+中使用tinymce及實(shí)現(xiàn)多圖上傳文件上傳公式編輯功能，tinymce安裝方法文中也給大家詳細(xì)介紹了，對vue tinymce實(shí)現(xiàn)上傳公式編輯相關(guān)知識(shí)感興趣的朋友跟隨小編一起學(xué)習(xí)下吧2021-05-05
本文主要介紹了vue使用axios接收流文件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
詳解Vue-cli3 項(xiàng)目在安卓低版本系統(tǒng)和IE上白屏問題解決
這篇文章主要介紹了Vue-cli3 項(xiàng)目在安卓低版本系統(tǒng)和 IE 上白屏問題解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04