解決vue單頁面應(yīng)用打包后相對(duì)路徑、絕對(duì)路徑相關(guān)問題
在項(xiàng)目開發(fā)過程中，在部署過程中，用到了反向代理，這就要求前端代碼中不能使用絕對(duì)路徑。但是我們知道，一般情況下，通過webpack+vuecli默認(rèn)打包后的HTML、css、js等文件，使用的都是絕對(duì)路徑。下面可以舉幾個(gè)例子來看一下：
1、打包后的index.html文件
2、打包后的css文件
所以，如果在項(xiàng)目中需要使用相對(duì)路徑來獲取靜態(tài)的資源文件，需要怎么做呢？
1、修改webpack配置文件中的assetsPublicPath，修改為如下圖所示。
修改配置后，進(jìn)行打包發(fā)現(xiàn)，打包后的index.html文件中，對(duì)css等文件的調(diào)用，變成相對(duì)路徑。
但是同時(shí)我們也會(huì)的發(fā)現(xiàn)這樣修改后，導(dǎo)致打包后的css文件中，圖片的路徑出現(xiàn)問題，如下所示，圖片路徑出錯(cuò)導(dǎo)致圖片找不到。
所以仍需進(jìn)一步修改配置，使其變成如下路徑：
.iradio_flat-yellow{background-image:url(../../static/img/yellow@2x.04850a2.png);
2、 處理圖片路徑問題
在webpack對(duì)ExtractTextPlugin插件配置的地方，加入如下代碼（具體值可能有變化，依據(jù)自身項(xiàng)目打包后文件路徑關(guān)系確定）
再次打包，發(fā)現(xiàn)問題解決！
補(bǔ)充知識(shí)：Vue-cli 2打包靜態(tài)文件夾static打包路徑報(bào)錯(cuò)，開發(fā)中使用絕對(duì)路徑，打包后部署到二級(jí)目錄，絕對(duì)路徑?jīng)]用改變。
在開發(fā)中，如果使用絕對(duì)路徑在運(yùn)行測試環(huán)境是沒用任何問題的
但是在打包后，路徑是回安裝原來寫的路徑完全不改變的搬過去。
那么在部署在二級(jí)目錄下，讀取根目錄肯定會(huì)報(bào)錯(cuò)
解決辦法：在開發(fā)中使用相對(duì)路徑
主要文件
config->index.js
build->assetsPublicPath: '/二級(jí)目錄/'
最后的斜線很重要不能省略
static靜態(tài)文件
build->utils.js
exports.cssLoaders下的function generateLoaders
if (options.extract) {
return ExtractTextPlugin.extract({
里面添加publicPath: '/二級(jí)目錄/'中間寫二級(jí)路徑地址，后面的也是斜線很重要，不能省略
以上這篇解決vue單頁面應(yīng)用打包后相對(duì)路徑、絕對(duì)路徑相關(guān)問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3.0項(xiàng)目小白填坑之vue3.0+vite獲取環(huán)境變量
Vue3項(xiàng)目使用vite作為打包工具時(shí),環(huán)境變量可以保存在.env文件中,在build時(shí)進(jìn)行解析,這篇文章主要給大家介紹了關(guān)于vue3.0項(xiàng)目小白填坑之vue3.0+vite獲取環(huán)境變量的相關(guān)資料,需要的朋友可以參考下2024-03-03
插槽（Slot）是Vue.js中一個(gè)非常重要的概念,它極大地提高了組件的復(fù)用性和靈活性,通過插槽,我們可以自定義組件的內(nèi)容,使其能夠適應(yīng)不同的場景,本文將結(jié)合實(shí)際案例,詳細(xì)介紹Vue中插槽的基本用法、類型以及高級(jí)技巧,需要的朋友可以參考下2024-11-11
Vue實(shí)現(xiàn)鼠標(biāo)懸浮隱藏與顯示圖片效果@mouseenter和@mouseleave事件詳解
在所做的Vue項(xiàng)目中,有時(shí)候需要在鼠標(biāo)移動(dòng)文字框的時(shí)候顯示一些詳細(xì)信息,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)鼠標(biāo)懸浮隱藏與顯示圖片效果@mouseenter和@mouseleave事件的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue3彈出層V3Popup實(shí)例詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
Vue3?中的?readonly?特性及函數(shù)使用詳解
readonly是Vue3中提供的一個(gè)新特性，用于將一個(gè)響應(yīng)式對(duì)象變成只讀對(duì)象，這篇文章主要介紹了Vue3?中的?readonly?特性詳解,需要的朋友可以參考下2023-04-04
Vue3使用Vuex之mapState與mapGetters詳解
這篇文章主要為大家介紹了Vue3使用Vuex之mapState與mapGetters詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Vue實(shí)現(xiàn)模糊查詢的簡單方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)模糊查詢的簡單方法,在vue中,前端模糊搜索主要是用computed屬性實(shí)現(xiàn),本文通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
這篇文章主要介紹了Vue.js計(jì)算屬性和偵聽器的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
Vue Transition實(shí)現(xiàn)類原生組件跳轉(zhuǎn)過渡動(dòng)畫的示例
本篇文章主要介紹了Vue Transition實(shí)現(xiàn)類原生組件跳轉(zhuǎn)過渡動(dòng)畫的示例，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
vue實(shí)現(xiàn)指定日期之間的倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)指定日期之間的倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05