快捷導(dǎo)航

vue打包配置相對路徑實現(xiàn)過程

更新時間：2025年11月08日 09:00:06 作者：銀白色？

文章主要討論了在Vue項目中配置請求攔截器的`baseUrl`以及Vue Router的`base`屬性的一致性問題,無論是使用hash模式還是history模式,相對路徑都必須通過hash模式來確保正確性

vue打包配置相對路徑

router/index.js

const router = new VueRouter({
  // 注銷mode默認(rèn)會啟用hash模式，放開mode啟用history模式
  mode: "hash", // require service support
  routes,
  // base: "./",
});

vue.config.js

module.exports = {
  // outputDir: "dist",
  css: {
    loaderOptions: {
      postcss: {
        plugins: [postcss],
      },
    },
  },
  // 打包生成的靜態(tài)資源 (js、css、img、fonts) 的目錄
  assetsDir: './assets',
  publicPath: "",
  lintOnSave: true, // 在保存時校驗格式
  productionSourceMap: false, // 生產(chǎn)環(huán)境是否生成 SourceMap
}

請求攔截的baseUrl，router的base是否一致，配置成一致即可。

相對路徑必須使用hash才有效，如果是history模式頁面就不顯示了。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

windows下vue.js開發(fā)環(huán)境搭建教程
這篇文章主要為大家詳細(xì)介紹了windows下vue.js開發(fā)環(huán)境搭建教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
在vue項目中使用sass語法問題
sass是一個最初由Hampton Catlin設(shè)計并由Natalie Weizenbaum開發(fā)的層疊樣式表語言。這篇文章主要介紹了在vue項目中使用sass語法,需要的朋友可以參考下
2019-07-07
Vue實現(xiàn)聊天界面
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)聊天界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
vue中keep-alive多級路由緩存問題
本文主要介紹了vue中keep-alive多級路由緩存問題，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-12-12
vue 封裝自定義組件之tabal列表編輯單元格組件實例代碼
這篇文章主要介紹了vue 封裝自定義組件tabal列表編輯單元格組件實例代碼,需要的朋友可以參考下
2017-09-09
前端筆記之vue中Map、Set之間的使用和區(qū)別詳析
Vue中的Map格式,是一種用于存儲和管理鍵值對數(shù)據(jù)的集合,與常規(guī)的數(shù)組不同,Map提供了更靈活和高效的方式來操作數(shù)據(jù),這篇文章主要介紹了前端筆記之vue中Map、Set之間的使用和區(qū)別的相關(guān)資料,需要的朋友可以參考下
2025-11-11
vue如何使用swiper插件修改左右箭頭的默認(rèn)樣式
這篇文章主要介紹了vue如何使用swiper插件修改左右箭頭的默認(rèn)樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
vuex數(shù)據(jù)持久化的兩種實現(xiàn)方案
在vuex的時候刷新以后里面存儲的state就會被瀏覽器釋放掉,因為我們的state都是存儲在內(nèi)存中的,所以一刷新頁面就會把state中的數(shù)據(jù)重置,這就涉及到vue數(shù)據(jù)持久化的問題,這篇文章主要給大家介紹了關(guān)于vuex數(shù)據(jù)持久化的兩種實現(xiàn)方案,需要的朋友可以參考下
2021-07-07
如何封裝了一個vue移動端下拉加載下一頁數(shù)據(jù)的組件
這篇文章主要介紹了如何封裝了一個vue移動端下拉加載下一頁數(shù)據(jù)的組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
Vue項目中Element UI組件未注冊的問題原因及解決方法
在 Vue 項目中使用 Element UI 組件庫時,開發(fā)者可能會遇到一些常見問題,例如組件未正確注冊導(dǎo)致的警告或錯誤,本文將詳細(xì)探討這些問題的原因、解決方法,以及如何在需要時撤銷相關(guān)操作,需要的朋友可以參考下
2025-01-01