Vue3造輪子之打包構(gòu)建配置二級(jí)目錄方式
項(xiàng)目代碼打包初試
vue3 的項(xiàng)目是基于 vite 啟動(dòng)的，執(zhí)行打包的時(shí)候，默認(rèn)生成的 index.html 是加載根目錄下的資源
如下圖所示：
打包生成的文件，放在根目錄下，是正常加載的。
但是當(dāng)我們的項(xiàng)目需要配置在二級(jí)目錄下時(shí)，資源的指向是有問(wèn)題的。
此時(shí)會(huì)報(bào) js 和 css 等文件找不到的錯(cuò)誤。
配置項(xiàng)目二級(jí)目錄
那么如何修改，讓我們打包后的文件，帶上二級(jí)目錄的名字呢？
查詢尤大的 vite庫(kù)，看到關(guān)于公共文件的路徑配置的一段話
這里的意思是我們?cè)趫?zhí)行 build 的腳本時(shí)，在后面加一個(gè)配置指令即可
我根據(jù)這段提示，在 package.json 中做出如下修改
{
// 原本
"scripts": {
"dev": "vite",
"build": "vite build "
}
// 修改
"scripts": {
"dev": "vite",
"build": "vite build --base=/lemon/"
}
}
修改完成后再次執(zhí)行 build 命令，可以發(fā)現(xiàn)我們的 index.html 的文件引入增加了二級(jí)目錄的名稱
如下圖所示：
至此問(wèn)題得到了解決！
總結(jié)
tips：多關(guān)注 Github 上的官方文檔，有不懂的配置，一查就能查到了哦~
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
axios如何取消重復(fù)無(wú)用的請(qǐng)求詳解
這篇文章主要給大家介紹了關(guān)于axios如何取消重復(fù)無(wú)用的請(qǐng)求的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用axios具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了Vue組件生命周期運(yùn)行原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
在Vue 3.0中,與2.0版本相比有一定的差別,最明顯的就是缺少了build、config文件夾,下面這篇文章主要給大家介紹了關(guān)于vue3中vue.config.js配置及注釋的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue 實(shí)現(xiàn)數(shù)字滾動(dòng)增加效果的實(shí)例代碼
最近做了個(gè)項(xiàng)目需要做數(shù)字滾動(dòng)增加的效果，剛開始接到這個(gè)項(xiàng)目還真是懵了，后來(lái)發(fā)現(xiàn)實(shí)現(xiàn)代碼很簡(jiǎn)單的，下面小編給大家?guī)?lái)了vue 實(shí)現(xiàn)數(shù)字滾動(dòng)增加效果的實(shí)例代碼，需要的朋友參考下吧2018-07-07
這篇文章主要介紹了vue項(xiàng)目配置vuex并開啟熱更新方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
基于vue v-for 循環(huán)復(fù)選框-默認(rèn)勾選第一個(gè)的實(shí)現(xiàn)方法
下面小編就為大家分享一篇基于vue v-for 循環(huán)復(fù)選框-默認(rèn)勾選第一個(gè)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue3路由配置createRouter、createWebHistory、useRouter和useRoute詳解
Vue3和Vue2基本差不多,只不過(guò)需要將createRouter、createWebHistory從vue-router中引入,再進(jìn)行使用,下面這篇文章主要給大家介紹了關(guān)于Vue3路由配置createRouter、createWebHistory、useRouter和useRoute的相關(guān)資料,需要的朋友可以參考下2023-02-02
vue cli3.0結(jié)合echarts3.0與地圖的使用方法示例
這篇文章主要給大家介紹了關(guān)于vue cli3.0結(jié)合echarts3.0與地圖的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue實(shí)現(xiàn)控制商品數(shù)量組件封裝及使用
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)控制商品數(shù)量組件的封裝及使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
el-tree的實(shí)現(xiàn)葉子節(jié)點(diǎn)單選的示例代碼
本文主要介紹了el-tree的實(shí)現(xiàn)葉子節(jié)點(diǎn)單選的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08