vuecli4中如何配置打包使用相對(duì)路徑
配置打包使用相對(duì)路徑
使用vuecli4進(jìn)行項(xiàng)目打包時(shí)，默認(rèn)使用的是根目錄的方式，這樣打包直接項(xiàng)目直接運(yùn)行就是一個(gè)大白屏，非常難受！
這時(shí)我們就需要在設(shè)置打包使用相對(duì)目錄的方式，設(shè)置過程非常簡(jiǎn)單。
1.在vuecli跟目錄下添加 `vue.config.js`作為配置文件
2.添加以下配置：
module.exports = {
?? ?//配置 運(yùn)行和打包時(shí)的文件路徑
?? ?publicPath:process.env.NODE_ENV==='production'?'./':'/',
}3.重新編譯項(xiàng)目。
非常好用！
vue打包時(shí)的publicPath,就是打包后靜態(tài)資源的路徑
情況一
當(dāng)不配置vue.config.js或者沒有publicPath屬性時(shí)，默認(rèn)訪問的靜態(tài)路徑是服務(wù)器的根目錄
服務(wù)器根目錄下沒有js文件夾所以訪問失敗，把dist下的js,css等靜態(tài)文件剪切到wamp/www目錄下就可以正常訪問了（注意重啟wamp）
情況二
當(dāng)配置為當(dāng)前目錄’./’
訪問正常，其實(shí)publicPath當(dāng)前目錄即打包后的index.html的當(dāng)前目錄，即dist目錄，怎么證明，把publicPath的值設(shè)置為’…/’，看看情況三
情況三
又報(bào)錯(cuò)，把js,css等靜態(tài)文件復(fù)制到wamp/www目錄下試一下
訪問成功，說(shuō)明：publicPath設(shè)置為當(dāng)前目錄’./'就是dist目錄的設(shè)想，沒錯(cuò)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中的data為什么是個(gè)函數(shù)而不是對(duì)象詳解
這篇文章主要介紹了vue中的data為什么是個(gè)函數(shù)而不是對(duì)象問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
Element-plus封裝搜索組件的實(shí)現(xiàn)
在后臺(tái)管理系統(tǒng)中,經(jīng)常需要在多個(gè)頁(yè)面中使用搜索功能,本文就來(lái)介紹一下Element-plus封裝搜索組件的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
懶加載就是延時(shí)加載,即當(dāng)需要用到的時(shí)候再去加載,本文主要介紹了Vue圖片懶加載之Vue-Lazyload的使用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-05-05
前端vue中el-table增加合計(jì)行及合并單元格代碼示例
在有些情況下我們會(huì)有合并表頭、合并列、合并尾部合計(jì)的需求,這篇文章主要給大家介紹了關(guān)于前端vue中el-table增加合計(jì)行及合并單元格的相關(guān)資料,需要的朋友可以參考下2023-09-09
動(dòng)態(tài)加載權(quán)限管理模塊中的Vue組件
本篇文章給大家詳細(xì)講解了如何在權(quán)限管理模塊中動(dòng)態(tài)的加載VUE組件的過程，有這方面需求的朋友跟著學(xué)習(xí)下吧。2018-01-01
在Vue中實(shí)現(xiàn)對(duì)文件的壓縮和解壓縮功能
在前端開發(fā)中,文件的壓縮和解壓縮是經(jīng)常需要用到的功能,尤其是在需要上傳和下載文件的場(chǎng)景下,文件壓縮可以減小文件大小,加快文件傳輸速度,提高用戶體驗(yàn),本文將介紹在Vue項(xiàng)目中如何進(jìn)行文件的壓縮和解壓縮,需要的朋友可以參考下2023-11-11
Vue.js中實(shí)現(xiàn)密碼修改及頁(yè)面跳轉(zhuǎn)和刷新的完整指南
在現(xiàn)代Web應(yīng)用中,用戶賬戶管理是一個(gè)核心功能,其中密碼修改是一個(gè)常見的需求,本文將詳細(xì)介紹如何在Vue.js應(yīng)用中實(shí)現(xiàn)用戶密碼修改功能,并在成功后跳轉(zhuǎn)到登錄頁(yè)面并刷新該頁(yè)面,需要的朋友可以參考下2024-12-12
在項(xiàng)目開發(fā)中我們難免碰到需要對(duì)webpack配置更改的情況,下面這篇文章主要給大家介紹了關(guān)于vuecli中chainWebpack的常用操作舉例,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue3在history模式下如何通過vite打包部署白屏問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue3.0中setup中異步轉(zhuǎn)同步的實(shí)現(xiàn)
這篇文章主要介紹了vue3.0中setup中異步轉(zhuǎn)同步的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06