【已解决】若依前后端分离项目-VUE3,怎么修改访问带项目名及打包文件名称一文搞定
- 若依(ruoyi)
- 时间：2025-04-17 22:32
- 487人已阅读
简介
在下载了若依vue3前端项目后，默认是ruoyi-ui。如果想要修改成自己项目。比如work-admin这个项目怎么处理？一、修改访问项目名称1.1在vite.config.js中找到如下代码：base: VITE_APP_ENV === 'production' ? '/' : '/&#
🔔🔔好消息!好消息!🔔🔔
有需要的朋友👉:微信号
在下载了若依vue3前端项目后，默认是ruoyi-ui。如果想要修改成自己项目。比如work-admin这个项目怎么处理？
一、修改访问项目名称
1.1 在vite.config.js中找到如下代码：
base: VITE_APP_ENV === 'production' ? '/' : '/',
比如咱们项目名称是work-admin。那么就修改成如下：
base: VITE_APP_ENV === 'production' ? '/work-admin' : '/work-admin',
二、修改后端访问url地址
2.1 在vite.config.js中找到如下代码：
proxy: {
// https://cn.vitejs.dev/config/#server-proxy
'/dev-api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '')
}
}把访问前缀及target地址修改成自己的即可，同时注意修改p.replace。比如凯哥这里修改成：
proxy: {
// https://cn.vitejs.dev/config/#server-proxy
'/aj-dev-api': {
target: 'http://192.168.8.11:8085',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/aj-dev-api/, '')
}
}2.2 修改各个.env.xxx文件
比如凯哥这里修改.env.development。
VITE_APP_BASE_API = '/dev-api'
把这个base_api修改成咱们上面2.1的值就行了。
VITE_APP_BASE_API = '/aj-dev-api'
其他环境类似。比如.env.staging
三、修改打包后文件名称
3.1 在vite.config.js中，添加如下代码：
build: {
outDir: 'work-admin',
},四、修改访问添加项目名称后，登录成功调404页面，退出登录也跳失败
4.1 修改的文件：
vite.config.js
router/index.js
layout/components/Navbar.vue
utils/request.js
nginx （非必须修改）
4.2 具体修改步骤(请注意：这里是VUE3的项目修改)
1、修改vite.config.js中的base属性
base: VITE_APP_ENV === 'production' ? '/work-admin' : '/work-admin',
2、修改router/index.js，createWebHistory添加/admin子路径
const router = createRouter({
history: createWebHistory('/work-admin'),
....
});
3、/index路由添加获取子路径/admin
修改layout/components/Navbar.vue中的location.href
location.href = '/work-admin/index';
修改utils/request.js中的location.href
location.href = '/work-admin/index';
4、修改nginx配置 -(非必须修改)
location /work-admin{
alias /home/ruoyi/projects/ruoyi-ui;
try_files $uri $uri/ /work-admin/index.html;
index index.html index.htm;
}打开浏览器，输入：http://localhost/work-admin 能正常访问和刷新表示成功。
上一篇： AI编程是什么？