vue打包相關(guān)細節(jié)整理(小結(jié))
項目在dev環(huán)境下運行沒有問題，打包之后就各種報錯一下來整理一下遇到的問題
1、打包好的網(wǎng)頁無法訪問static目錄的資源
原因是下載官方的cli時，默認設(shè)置是根據(jù)絕對路徑來定位資源目錄的，這樣就非常方便在dev環(huán)境下進行本地調(diào)試，但是在打包部署之后，就需要通過相對路徑來訪問靜態(tài)資源了，修改方法很簡單，在config/index.js文件文件中，定位到
把assetsPublicPath的value改成‘./'，修改之后，打包生成的文件，對資源的引用路徑會在路徑前面加上‘./'，這樣就可以找到對應(yīng)的資源文件了
2、可以找到靜態(tài)資源文件，但是在css文件中的引用的資源并沒有找到
原因是打包的時候，所有static文件下的資源都是加工，生成文件名加上hashcode為新命名的文件，例如css文件中引用了ttf（字體文件）,由于ttf文件在打包之后加工成xxx+hashcode.ttf文件，原本的css文件的引用當然會找不到加工后的ttf文件。
解決的方法就是通過修改build/util.js文件的
，添加publicPath：‘../../'
我們會發(fā)現(xiàn)打包后的css文件，對ttf文件的引用路徑自動加上了hashcode，完美解決css引用外部資源失效的問題
3、圖片，MP4，字體等資源比較大，超過限制，導(dǎo)致文件沒有被打包進去，可以通過\build\webpack.base.conf.js
，
修改對文件的大小限制
4、打包后，css樣式和測試環(huán)境的不一樣，原因是打包之后的css文件調(diào)用順序發(fā)生錯亂了，
所有第三方庫的css文件在引入的時候，務(wù)必在App文件引入之前引入，以上只是main.js文件的改法，可以根據(jù)需要來修改對應(yīng)的js文件
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- vue打包后顯示空白正確處理方法
- Vue打包后出現(xiàn)一些map文件的解決方法
- 使用vue打包時vendor文件過大或者是app.js文件很大的問題
- vue打包使用Nginx代理解決跨域問題
- 解決vue打包項目后刷新404的問題
- 解決vue打包之后靜態(tài)資源圖片失效的問題
- 解決Vue打包之后文件路徑出錯的問題
- vue打包之后生成一個配置文件修改接口的方法
- 解決vue打包css文件中背景圖片的路徑問題
- 解決vue打包后vendor.js文件過大問題
- 解決vue打包后刷新頁面報錯：Unexpected token <
- 解決Vue打包后訪問圖片/圖標不顯示的問題
- vue打包的時候自動將px轉(zhuǎn)成rem的操作方法
- 詳解Vue打包優(yōu)化之code spliting
- 基于vue打包后字體和圖片資源失效問題的解決方法
- Vue打包后訪問靜態(tài)資源路徑問題
- 解決Vue打包上線之后部分CSS不生效的問題
- 壓縮Vue.js打包后的體積方法總結(jié)(Vue.js打包后體積過大問題)
相關(guān)文章
這篇文章主要介紹了如何運行vue項目，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Element input樹型下拉框的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
vue中axios的封裝問題(簡易版攔截,get,post)
這篇文章主要介紹了vue中axios的封裝問題(簡易版攔截,get,post),需要的朋友可以參考下2018-06-06
在本文章里小編給大家整理了關(guān)于Vue中this.$nextTick的作用及用法，有需要的朋友們可以跟著學(xué)習(xí)參考下。2020-02-02
這篇文章主要為大家詳細介紹了vue.js的安裝方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
最近在項目中遇到點擊按鈕復(fù)制鏈接功能,所以這篇文章主要給大家介紹了關(guān)于vue粘貼復(fù)制功能的實現(xiàn)過程,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue2配置scss的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
關(guān)于vue-admin-template模板連接后端改造登錄功能
這篇文章主要介紹了關(guān)于vue-admin-template模板連接后端改造登錄功能,登陸方法根據(jù)賬號密碼查出用戶信息，根據(jù)用戶id與name生成token并返回，userinfo則是對token進行獲取，在查出對應(yīng)值進行返回，感興趣的朋友一起看看吧2022-05-05
MPEGTS.js是一個輕量級的JavaScript庫,用于處理MPEG-TS流,這篇文章主要給大家介紹了關(guān)于vue使用mpegts.js的詳細步驟記錄,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
Vue項目localhost:8080無法訪問此網(wǎng)站，拒絕了我們的連接請求的解決方案
前端頁面使用的是vue,vue項目啟動成功,沒有任何報錯,服務(wù)控制臺已出現(xiàn)APP訪問地址,點擊訪問地址出現(xiàn)無法訪問此網(wǎng)站,拒絕了我們的連接請求,所以本文給大家介紹了Vue項目localhost:8080無法訪問此網(wǎng)站,拒絕了我們的連接請求的解決方案,需要的朋友可以參考下2024-12-12