vue-cli4如何打包靜態(tài)資源到指定目錄
打包靜態(tài)資源到指定目錄
在最近開發(fā)工作中，我打包的 dist 文件夾下，vue-cli4 打包（npm run build）的靜態(tà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 來存放打包的靜態(tài)資源。
設(shè)置之后打包的文件目錄為：
說明：文件夾下的 js 和 json 文件夾是我寫在 public 文件夾下的模塊用于 axios 請(qǐng)求本地?cái)?shù)據(jù)，打包時(shí)會(huì)直接打包到 dist 文件夾下。
vue-cli打包訪問靜態(tài)資源404
使用vue-cli生產(chǎn)打包，把代碼放到服務(wù)器上訪問的時(shí)候，不少同學(xué)會(huì)看到頁面一片空白，打開控制臺(tái)，會(huì)發(fā)現(xiàn)是某些資源文件找不到，如圖：
其實(shí)這里是因?yàn)関ue-cli的webpack打包配置靜態(tài)文件訪問路徑不對(duì)，配置文件路徑如圖：
在這個(gè)文件下面找到生產(chǎn)(build)配置：
要解決靜態(tài)文件訪問路徑問題只需要修改配置中的assetsPublicPath字段即可。
如果你的服務(wù)器靜態(tài)文件路徑是這樣的：
將路徑寫成這樣即可訪問靜態(tài)資源：
資源訪問成功狀態(tài)：
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解
這篇文章主要介紹了淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解,v-model用于表單的數(shù)據(jù)綁定很常見，下面就來詳細(xì)的介紹一下2018-11-11
完美解決element-ui的el-input設(shè)置number類型后的相關(guān)問題
這篇文章主要介紹了完美解決element-ui的el-input設(shè)置number類型后的相關(guān)問題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue 移動(dòng)端記錄頁面瀏覽位置的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
本文主要是帶領(lǐng)大家分析$mount的相關(guān)知識(shí)，需要的朋友一起學(xué)習(xí)吧2017-12-12
這篇文章主要介紹了vue?注釋template中組件的屬性說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue項(xiàng)目中icon亂碼的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue3項(xiàng)目中reset.scss模板使用導(dǎo)入
這篇文章主要為大家介紹了Vue3項(xiàng)目中reset.scss模板使用導(dǎo)入示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
vue動(dòng)態(tài)路由匹配和路由懶加載多種方法詳解
這篇文章主要介紹了vue動(dòng)態(tài)路由匹配和路由懶加載,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
如何監(jiān)聽Vue項(xiàng)目報(bào)錯(cuò)的4種方式?
本文主要介紹了如何監(jiān)聽Vue項(xiàng)目報(bào)錯(cuò)的4種方式，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue3實(shí)現(xiàn)小程序手機(jī)號(hào)一鍵登錄功能
這篇文章主要為大家詳細(xì)介紹了如何使用vue3實(shí)現(xiàn)小程序手機(jī)號(hào)一鍵登錄功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12