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