前端带路径

# 前端带路径

# 一. 背景

由于服务器资源有限，部署多套系统的时候无法用端口进行区分，决定不同系统使用不同根目录区分，开源版的若依框架有些问题，需要对框架进行修改。

# 二. 如何修改

需要对前端模块（默认ruoyi-ui）如下文件进行修改。例如：根路径为 /risun

# 1. .env.development[staging | production]

在.env.development[staging | production]3个文件中，添加VUE_APP_BASE_URL

## .env.development
VUE_APP_BASE_URL = '/'
## .env.staging
VUE_APP_BASE_URL = '/'
## .env.production
VUE_APP_BASE_URL = '/risun'

# 2. vue.config.js

修改publicPath

// 找到
publicPath: process.env.NODE_ENV === "production" ? "/" : "/"
// 修改为
publicPath: process.env.VUE_APP_BASE_URL,

# 3. router下index.js

为new Router添加base属性

// 找到
export default new Router({
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})
// 修改为（其中 base 和 vue.config.js 中保持一致）
export default new Router({
  base: process.env.VUE_APP_BASE_URL,      
  mode: 'history', 
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

Navbar.vue 位于 src/layout/components 下

// 找到
goIndex(){
  location.href = '/index';
}
// 修改为
goIndex(){
  location.href = this.$router.options.base == "/" ? "/index" : this.$router.options.base + '/index'
}

# 5. request.js

request.js 位于 src/utils 下

// 引入
import router from '@/router'

// 找到
location.href = '/index';
// 修改为
location.href = router.options.base == "/" ? "/index" : router.options.base + '/index'

框架默认的登录可能会出现404，需要进行如下修改

// 找到
handleLogin() {
  ...
  this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
  ...
}

// 修改为
handleLogin() {
  ...
  const uri = this.redirect && this.redirect != '/' ? this.redirect : "/index"
  this.$router.push({path: uri}).catch(() => {});
  ...
}

# 三. Nginx配置

location /risun {
	alias  /data/risun/html;
	try_files $uri $uri/ /risun/index.html/;
	index  index.html index.htm;
}

# 四. 参考资料

https://blog.csdn.net/op4439/article/details/121470737
https://v3.router.vuejs.org/zh/guide/

← 自动化部署