Vue 打包后相對(duì)路徑的引用問(wèn)題
打包后相對(duì)路徑的引用
vue打包部署后，訪問(wèn)是需要加上項(xiàng)目名
這時(shí)候訪問(wèn)是使用絕對(duì)路徑就會(huì)處問(wèn)題了。
解決辦法
把引用路徑改為相對(duì)路徑
解決JS、CSS等資源
打開(kāi)build文件夾下的webpack.prod.conf.js，找到output，添加“ publicPath: ‘./’,”即可
或者打開(kāi)config文件夾下的index.js，找到build，修改“assetsPublicPath: ‘./’”即可
解決圖片的引用問(wèn)題
打開(kāi)build文件夾下的utils.js，如下修改即可
vue cli打包相對(duì)路徑遇到的坑
<script src="/js/index.67b1c383.js"></script>?
這個(gè)是vue打包之后的絕對(duì)路徑，但是想要的是：
<script src="./js/index.67b1c383.js"></script>
這種相對(duì)路徑
網(wǎng)上說(shuō)的，大部分解決方案是修改publicPath: './', ，但是實(shí)際測(cè)試之后，還是有很大的問(wèn)題
第一種打包設(shè)置：publicPath: './', 結(jié)果：<script src="js/chunk-vendors.dbdd0915.js"> 還是相對(duì)路徑
第一種打包設(shè)置：publicPath: '', 結(jié)果：<script src="js/chunk-vendors.dbdd0915.js"> 也是相對(duì)路徑
第一種打包設(shè)置：publicPath: '../', 結(jié)果：<script src="../js/chunk-vendors.dbdd0915.js"> 這個(gè)就非常神奇了，一個(gè)點(diǎn)的時(shí)候不行，2個(gè)點(diǎn)的時(shí)候，反而能行，不知道為啥。
publicPath: process.env.NODE_ENV === 'production' ? '././' : '/'
最后改成這個(gè)樣子居然可以了。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
VueAwesomeSwiper在VUE中的使用以及遇到的一些問(wèn)題
這篇文章主要介紹了VueAwesomeSwiper在VUE中的使用以及遇到的一些問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue項(xiàng)目實(shí)現(xiàn)圖形驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)圖形驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了element-ui在table中如何禁用其中幾行問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
VueJs監(jiān)聽(tīng)window.resize方法示例
本篇文章主要介紹了VueJs監(jiān)聽(tīng)window.resize方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
Vue3使用postcss-px-to-viewport實(shí)現(xiàn)頁(yè)面自適應(yīng)
postcss-px-to-viewport 是一個(gè) PostCSS 插件,它可以將 px 單位轉(zhuǎn)換為視口單位,下面我們就看看如何使用postcss-px-to-viewport實(shí)現(xiàn)頁(yè)面自適應(yīng)吧2024-01-01
Vue 父子組件實(shí)現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式(案例代碼)
本文給大家分享Vue 父子組件實(shí)現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式，方式一是通過(guò)監(jiān)聽(tīng)事件實(shí)現(xiàn)方式二是通過(guò) v-model 實(shí)現(xiàn)，每種方式結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-11-11
基于Vue實(shí)現(xiàn)Excel解析與導(dǎo)出功能詳解
導(dǎo)入導(dǎo)出excel這是前端做管理系統(tǒng)最常用的功能了,下面這篇文章主要給大家介紹了基于Vue實(shí)現(xiàn)Excel解析與導(dǎo)出功能的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
Vue3中的?computed,watch,watchEffect的使用方法
這篇文章主要介紹了Vue3中的?computed,watch,watchEffect的使用方法，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)價(jià)值，需要得小伙伴可以參考一下2022-06-06
Vue引入高德地圖并觸發(fā)實(shí)現(xiàn)多個(gè)標(biāo)點(diǎn)的示例詳解
這篇文章主要介紹了Vue引入高德地圖并觸發(fā)實(shí)現(xiàn)多個(gè)標(biāo)點(diǎn),主要是在public下的index.html中引入地圖，引入組件設(shè)置寬高100%，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-05-05
vue 內(nèi)聯(lián)樣式style中的background用法說(shuō)明
這篇文章主要介紹了vue 內(nèi)聯(lián)樣式style中的background用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08