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