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