vue項目部署到非根目錄下的問題及解決
更新時間：2022年04月19日 16:00:10 作者：Starzkg
這篇文章主要介紹了vue項目部署到非根目錄下的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
問題描述
同一個生產部署項目，基內外網(wǎng)的訪問路徑并不相同，內網(wǎng)是基于域名根目錄來訪問，而外網(wǎng)卻指向了一個子目錄。
eg. ：
- vue-router: history模式
- 內網(wǎng)環(huán)境：192.168.1.1:8080/index.html
- 外網(wǎng)環(huán)境：domain.com/ttsd/index.html
由于開發(fā)出來的項目是要部署在客戶方，且客戶并不想單獨拿一個域名（或子域）來部署，這時，打包后的程序就要作一些配置方面的修改了。
解決方案
1、Vue配置
Vue 2
將 config/index.js 里的 assetsPublicPath: "/", 修改成 assetsPublicPath: "/app/",
// Paths
assetsRoot: path.resolve(__dirname, "../dist"),
assetsSubDirectory: "static",
assetsPublicPath: "/app/", //修改打包后路徑 修改這里
Vue 3
在根目錄下新建 vue.config.js 文件，然后加上以下內容：（如果已經有此文件就直接修改）
module.exports = {
publicPath: '', // 相對于 HTML 頁面（目錄相同）
}2、修改路由
- 在路由的history模式下，所有的路由都是基于根路徑的，如 /xxxx ，由于部署目錄未知，所以我們可以根據(jù) location.pathname 來獲取到當前訪問的文件路徑，來修改路由。
- vue-router里提供了一個base的屬性
- base類型: string 默認值: "/" 應用的基路徑。例如，如果整個單頁應用服務在 /app/ 下，然后 base 就應該設為 "/app/" 。
router => index.js
增加基礎路徑 base:"/app/"
const router = new Router({
? mode: "history",
? // base: getAbsolutePath(),
? base: "/app/",
? routes: [...]
......動態(tài)獲取根路徑
function getAbsolutePath () {
?let path = location.pathname
?return path.substring(0, path.lastIndexOf('/') + 1)
}
?
const routers = new Router({
?mode: 'history',
?base: getAbsolutePath(),
?...
})vue項目部署在非根目錄下的配置
版本
注：使用版本較新，項目結構可能存在差異。
vue項目配置
src/vue.config.js -- 打包配置（我理解的是打包配置，不確定是不是）
module.exports = {
? ? publicPath: '/pgcweb/',
src/router/index.js -- 路由配置
const router = new VueRouter({
?? ?base: '/pgcweb/',
?? ?//mode: 'history',nginx配置
location ^~ /pgcweb{
? ? alias /xxx/xxx/xxx/dist;
? ? try_files $uri $uri/ /pgcweb/index.html;
}以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了vuejs使用遞歸組件實現(xiàn)樹形目錄的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)echarts中的儀表盤，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
離放假還有1天，今天小編抽空給大家分享前端時間小編做的vue項目，非常完整，需要的朋友參考下2018-02-02
這篇文章主要介紹了el-date-picker篩選時間日期選擇范圍,本文通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2024-12-12
這篇文章主要介紹了Vue 實現(xiàn)可視化拖拽頁面編輯器的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-02-02
本文介紹了vue.config.js中devServer的常見配置方式,包括基本配置、代理配置、熱模塊替換、靜態(tài)資源服務、HTTPS配置、多代理配置以及其他配置項,幫助開發(fā)者根據(jù)項目需求進行定制2025-01-01
本文詳細講解了vue3獲取當前路由地址的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-01-01
這篇文章主要為大家詳細介紹了VUE多層路由嵌套的實現(xiàn)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了vue如何在多個不同服務器下訪問不同地址，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了Vue項目的優(yōu)化打包，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11