vuecli4中如何配置打包使用相對路徑
配置打包使用相對路徑
使用vuecli4進(jìn)行項目打包時，默認(rèn)使用的是根目錄的方式，這樣打包直接項目直接運(yùn)行就是一個大白屏，非常難受！
這時我們就需要在設(shè)置打包使用相對目錄的方式，設(shè)置過程非常簡單。
1.在vuecli跟目錄下添加 `vue.config.js`作為配置文件
2.添加以下配置：
module.exports = {
?? ?//配置 運(yùn)行和打包時的文件路徑
?? ?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 給mapState中定義的屬性賦值報錯的問題,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
在開發(fā)中我們想要給一個組件的顯示和消失添加某種過渡動畫,可以很好的增加用戶體驗,下面這篇文章主要給大家介紹了關(guān)于Vue3過渡動畫踩坑的相關(guān)資料,需要的朋友可以參考下2021-12-12
近期在做ve3的項目時因為功能需要,需要獲取當(dāng)前路由的地址,下面這篇文章主要給大家介紹了關(guān)于vue3獲取當(dāng)前路由地址的兩種方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue.js利用defineProperty實現(xiàn)數(shù)據(jù)的雙向綁定
本篇文章主要介紹了用Node.js當(dāng)作后臺、jQuery寫前臺AJAX代碼實現(xiàn)用戶登錄和注冊的功能的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
VueX?mapGetters獲取Modules中的Getters方式
這篇文章主要介紹了VueX?mapGetters獲取Modules中的Getters方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue如何從后臺獲取數(shù)據(jù)生成動態(tài)菜單列表
這篇文章主要介紹了vue如何從后臺獲取數(shù)據(jù)生成動態(tài)菜單列表，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-cli創(chuàng)建vue項目的詳細(xì)步驟記錄
vue.cli是vue中的項目構(gòu)造工具,是一個npm包,需要安裝node.js和 git才能用,下面這篇文章主要給大家介紹了關(guān)于利用vue-cli創(chuàng)建vue項目的詳細(xì)步驟,需要的朋友可以參考下2022-06-06
vue使用el-upload上傳文件及Feign服務(wù)間傳遞文件的方法
這篇文章主要介紹了vue使用el-upload上傳文件及Feign服務(wù)間傳遞文件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了cdn模式下vue的基本用法，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2018-10-10
這篇文章主要介紹了vue?注釋template中組件的屬性說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04