Vue 打包后相對(duì)路徑的引用問題
打包后相對(duì)路徑的引用
vue打包部署后，訪問是需要加上項(xiàng)目名
這時(shí)候訪問是使用絕對(duì)路徑就會(huì)處問題了。
解決辦法
把引用路徑改為相對(duì)路徑
解決JS、CSS等資源
打開build文件夾下的webpack.prod.conf.js，找到output，添加“ publicPath: ‘./’,”即可
或者打開config文件夾下的index.js，找到build，修改“assetsPublicPath: ‘./’”即可
解決圖片的引用問題
打開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)上說的，大部分解決方案是修改publicPath: './', ，但是實(shí)際測(cè)試之后，還是有很大的問題
第一種打包設(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)文章
vue.js的vue-cli腳手架中使用百度地圖API的實(shí)例
今天小編就為大家分享一篇關(guān)于vue.js的vue-cli腳手架中使用百度地圖API的實(shí)例，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了解決element-ui的下拉框有值卻無法選中的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
element-ui中el-row中設(shè)置:gutter間隔不生效問題
這篇文章主要介紹了element-ui中el-row中設(shè)置:gutter間隔不生效問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue監(jiān)聽滾動(dòng)實(shí)現(xiàn)錨點(diǎn)定位(雙向)示例
今天小編大家分享一篇Vue監(jiān)聽滾動(dòng)實(shí)現(xiàn)錨點(diǎn)定位(雙向)示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue.js中該如何自己維護(hù)路由跳轉(zhuǎn)記錄
這篇文章主要給大家介紹了關(guān)于Vue.js中該如何自己維護(hù)路由跳轉(zhuǎn)記錄的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue3之使用js實(shí)現(xiàn)動(dòng)畫示例解析
這篇文章主要為大家介紹了Vue3之使用js實(shí)現(xiàn)動(dòng)畫示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
Vue3之Vite中由element?ui更新導(dǎo)致的啟動(dòng)報(bào)錯(cuò)解決
這篇文章主要介紹了Vue3之Vite中由element?ui更新導(dǎo)致的啟動(dòng)報(bào)錯(cuò)解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
本文主要介紹了vue數(shù)據(jù)綁定的相關(guān)知識(shí)，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了vue props數(shù)據(jù)傳遞類型限制方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
本文主要還是針對(duì) Vue.js 2.x 版本，畢竟接下來一段時(shí)間，Vue.js 2.x 還是我們工作中的主流版本，對(duì)vue.js性能優(yōu)化技巧相關(guān)知識(shí)感興趣的朋友一起看看吧2021-09-09