vue-cli4如何打包靜態(tài)資源到指定目錄
打包靜態(tài)資源到指定目錄
在最近開(kāi)發(fā)工作中，我打包的 dist 文件夾下，vue-cli4 打包（npm run build）的靜態(tài)資源全部都平鋪展開(kāi)在該文件夾下，看著很別扭，于是想打包到 static 文件夾下。
vue-cli4 執(zhí)行打包命令時(shí)，默認(rèn)打包的位置是dist文件夾下，不會(huì)自動(dòng)打包為一個(gè)模塊（文件夾）。
解決
在 vue.config.js 文件中設(shè)置 assetsDir 指定打包的目錄為根目錄下的 static 文件夾，就會(huì)在 dist 文件夾下自動(dòng)生成一個(gè)新的文件夾 static 來(lái)存放打包的靜態(tài)資源。
設(shè)置之后打包的文件目錄為：
說(shuō)明：文件夾下的 js 和 json 文件夾是我寫在 public 文件夾下的模塊用于 axios 請(qǐng)求本地?cái)?shù)據(jù)，打包時(shí)會(huì)直接打包到 dist 文件夾下。
vue-cli打包訪問(wèn)靜態(tài)資源404
使用vue-cli生產(chǎn)打包，把代碼放到服務(wù)器上訪問(wèn)的時(shí)候，不少同學(xué)會(huì)看到頁(yè)面一片空白，打開(kāi)控制臺(tái)，會(huì)發(fā)現(xiàn)是某些資源文件找不到，如圖：
其實(shí)這里是因?yàn)関ue-cli的webpack打包配置靜態(tài)文件訪問(wèn)路徑不對(duì)，配置文件路徑如圖：
在這個(gè)文件下面找到生產(chǎn)(build)配置：
要解決靜態(tài)文件訪問(wèn)路徑問(wèn)題只需要修改配置中的assetsPublicPath字段即可。
如果你的服務(wù)器靜態(tài)文件路徑是這樣的：
將路徑寫成這樣即可訪問(wèn)靜態(tài)資源：
資源訪問(wèn)成功狀態(tài)：
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談Vue 性能優(yōu)化之深挖數(shù)組，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要介紹了在vue中設(shè)置滾動(dòng)條的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
淺析Vue3中通過(guò)v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡(jiǎn)化父子組件雙向綁定
這篇文章主要介紹了淺析Vue3中通過(guò)v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡(jiǎn)化父子組件雙向綁定,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue中路由重定向redirect問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue element-ui里的table中表頭與表格出現(xiàn)錯(cuò)位的解決
這篇文章主要介紹了vue element-ui里的table中表頭與表格出現(xiàn)錯(cuò)位的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue整合Node.js直連Mysql數(shù)據(jù)庫(kù)進(jìn)行CURD操作過(guò)程詳解
這篇文章主要給大家分享Vue整合Node.js，直連Mysql數(shù)據(jù)庫(kù)進(jìn)行CURD操作的詳細(xì)過(guò)程，文中有詳細(xì)的代碼講解，具有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
Vue常見(jiàn)報(bào)錯(cuò)以及解決方案實(shí)例總結(jié)
最近做了一個(gè)比較老的vue項(xiàng)目,啟動(dòng)居然各種報(bào)錯(cuò),下面這篇文章主要給大家介紹了關(guān)于Vue常見(jiàn)報(bào)錯(cuò)以及解決方案的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue調(diào)試工具vue-devtools安裝及使用方法
本文主要介紹 vue的調(diào)試工具 vue-devtools 的安裝和使用，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-11-11
vue中使用elementui實(shí)現(xiàn)樹(shù)組件tree右鍵增刪改功能
這篇文章主要介紹了vue中使用elementui實(shí)現(xiàn)對(duì)樹(shù)組件tree右鍵增刪改功能,右擊節(jié)點(diǎn)可進(jìn)行增刪改，對(duì)節(jié)點(diǎn)數(shù)據(jù)進(jìn)行模糊查詢功能，本文給大家分享了完整代碼，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue?檢測(cè)變化的注意事項(xiàng)，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08