vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑
更新時間：2022年04月02日 12:10:45 作者：..Leo..
這篇文章主要介紹了vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue cli3.x打包后修改生成的靜態(tài)資源的目錄和路徑
在vue cli 2.x版本修改目錄和路徑，都在'/config/index'文件里修改。
但是vue cli升級成3.x發(fā)現(xiàn)這些文件都不見啦，就一個'vue.config.js'文件，我們可以在這里修改:
`module.exports = {
? // 沒有書寫outputDir屬性 ? 默認'dist' ?對應(yīng)dev.assetsSubDirectory.
? outputDir: 'static',
??
? // 沒有書寫baseUrl屬性 ? 默認'/' ?對應(yīng)dev.assetsPublicPath.
? // 從 Vue CLI 3.3 起baseUrl已棄用，請使用publicPath.
? baseUrl: '/' ?
}`因為業(yè)務(wù)需求，需要把打包好的css和js文件放到阿里云的oss服務(wù)器上。
剛開始baseUrl寫上域名即可。
過了幾天發(fā)現(xiàn)本地起服務(wù)器的時候，會把這個baseUrl拼在本地地址后面導(dǎo)致頁面報錯
解決方法：
baseUrl: process.env.NODE_ENV === 'production' ? '你的域名' : '/'
vue3.3打包后,路徑出錯問題
由于3.3廢棄baseUrl了，所以不能設(shè)置baseUrl
module.exports = {
? publicPath: '/dist/',
? outputDir: 'dist',
? assetsDir: 'static',
? lintOnSave: true,
? productionSourceMap: false,
? devServer: {?
? }?
}請設(shè)置vue.config.js里面的publicPath，outputDir
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3.2單文件組件setup的語法糖與新特性總結(jié)
ue3上線已經(jīng)很久了,許多小伙伴應(yīng)該都已經(jīng)使用過vue3了,下面這篇文章主要給大家介紹了關(guān)于Vue3.2單文件組件setup的語法糖與新特性總結(jié)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
關(guān)于vue項目proxyTable配置和部署服務(wù)器的問題
這篇文章主要介紹了關(guān)于vue項目proxyTable配置和部署服務(wù)器的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue spa應(yīng)用中的路由緩存問題與解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
今天小編就為大家分享一篇Vue中img的src是動態(tài)渲染時不顯示的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue使用高德地圖選點定位搜索定位功能,文中給大家提到了常見問題解決方法，本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
再次遇到監(jiān)聽子組件收到父組件傳過來的值,如果這個值變化,頁面中的值發(fā)現(xiàn)是不會跟著同步變化的,本文給大家介紹Vue2?watch監(jiān)聽props的值,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了Vue3引入騰訊地圖的相關(guān)資料,并實現(xiàn)點擊地圖添加標(biāo)注的功能,示例代碼提供了添加單個或多個標(biāo)注的方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue中的$root和$parent ，本文通過文字實例代碼相結(jié)合的形式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
解決vue使用vant輪播組件swipe + flex時文字抖動問題
這篇文章主要介紹了解決vue使用vant輪播組件swipe + flex時文字抖動問題，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-01-01
這篇文章主要為大家詳細介紹了Vue分頁組件的封裝方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07