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