vuecli4中如何配置打包使用相對(duì)路徑
配置打包使用相對(duì)路徑
使用vuecli4進(jìn)行項(xiàng)目打包時(shí)，默認(rèn)使用的是根目錄的方式，這樣打包直接項(xiàng)目直接運(yùn)行就是一個(gè)大白屏，非常難受！
這時(shí)我們就需要在設(shè)置打包使用相對(duì)目錄的方式，設(shè)置過(guò)程非常簡(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或者沒(méi)有publicPath屬性時(shí)，默認(rèn)訪問(wèn)的靜態(tài)路徑是服務(wù)器的根目錄
服務(wù)器根目錄下沒(méi)有js文件夾所以訪問(wèn)失敗，把dist下的js,css等靜態(tài)文件剪切到wamp/www目錄下就可以正常訪問(wèn)了（注意重啟wamp）
情況二
當(dāng)配置為當(dāng)前目錄’./’
訪問(wèn)正常，其實(shí)publicPath當(dāng)前目錄即打包后的index.html的當(dāng)前目錄，即dist目錄，怎么證明，把publicPath的值設(shè)置為’…/’，看看情況三
情況三
又報(bào)錯(cuò)，把js,css等靜態(tài)文件復(fù)制到wamp/www目錄下試一下
訪問(wèn)成功，說(shuō)明：publicPath設(shè)置為當(dāng)前目錄’./'就是dist目錄的設(shè)想，沒(méi)錯(cuò)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決Vue 給mapState中定義的屬性賦值報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了解決Vue 給mapState中定義的屬性賦值報(bào)錯(cuò)的問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
關(guān)于Vue3過(guò)渡動(dòng)畫(huà)的踩坑記錄
在開(kāi)發(fā)中我們想要給一個(gè)組件的顯示和消失添加某種過(guò)渡動(dòng)畫(huà),可以很好的增加用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于Vue3過(guò)渡動(dòng)畫(huà)踩坑的相關(guān)資料,需要的朋友可以參考下2021-12-12
近期在做ve3的項(xiàng)目時(shí)因?yàn)楣δ苄枰?需要獲取當(dāng)前路由的地址,下面這篇文章主要給大家介紹了關(guān)于vue3獲取當(dāng)前路由地址的兩種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue.js利用defineProperty實(shí)現(xiàn)數(shù)據(jù)的雙向綁定
本篇文章主要介紹了用Node.js當(dāng)作后臺(tái)、jQuery寫(xiě)前臺(tái)AJAX代碼實(shí)現(xiàn)用戶登錄和注冊(cè)的功能的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
VueX?mapGetters獲取Modules中的Getters方式
這篇文章主要介紹了VueX?mapGetters獲取Modules中的Getters方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue如何從后臺(tái)獲取數(shù)據(jù)生成動(dòng)態(tài)菜單列表
這篇文章主要介紹了vue如何從后臺(tái)獲取數(shù)據(jù)生成動(dòng)態(tài)菜單列表，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-cli創(chuàng)建vue項(xiàng)目的詳細(xì)步驟記錄
vue.cli是vue中的項(xiàng)目構(gòu)造工具,是一個(gè)npm包,需要安裝node.js和 git才能用,下面這篇文章主要給大家介紹了關(guān)于利用vue-cli創(chuàng)建vue項(xiàng)目的詳細(xì)步驟,需要的朋友可以參考下2022-06-06
vue使用el-upload上傳文件及Feign服務(wù)間傳遞文件的方法
這篇文章主要介紹了vue使用el-upload上傳文件及Feign服務(wù)間傳遞文件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
這篇文章主要介紹了cdn模式下vue的基本用法，本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-10-10
這篇文章主要介紹了vue?注釋template中組件的屬性說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04