Ruoyi-vue-pro Vue + nginx 二级目录部署到云服务器-编程知识

Ruoyi-vue-pro Vue + nginx 二级目录部署到云服务器

·http://www.your-server.com/ 这是一级目录，由于项目多，一般会通过二级域名http://oa.your-server.com/或二级目录http://www.your-server.com/oa来发布，本篇记录一下二级目录发布。先看效果

1、router/index.js配置base

export default new Router({base: "/oa",mode: 'history', // 去掉url中的#scrollBehavior: () => ({y: 0}),routes: constantRoutes
})

2、vue.config.js 配置 publicPath

.env.prod 配置

# 后端API 转发uri
VUE_APP_BASE_API = '/oa/api'# 二级目录配置
PUBLIC_PATH = '/oa'

vue.config.js 配置

module.exports = {// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上publicPath: process.env.PUBLIC_PATH ? process.env.PUBLIC_PATH : '/',// 在npm run build 或 yarn build 时 ，生成文件的目录outputDir: 'dist/oa',// 用于放置生成的静态资源 (js、css、img、fonts)目录, 相对于 outputDirassetsDir: 'static',}

3、vue 项目打包

npm run build:prod

4、将生成目录dist打包为dist.zip上传到服务器目录/home/，并完成解压

[root@hcss-ecs home]# ll dist
total 4
drwxr-xr-x 5 root root 4096 Apr  6 21:51 oa
[root@hcss-ecs home]# ll dist/oa/
total 48
-rw-r--r-- 1 root root 14336 Apr  6 21:51 favicon.ico
drwxr-xr-x 2 root root  4096 Apr  6 21:51 html
-rw-r--r-- 1 root root 11038 Apr  6 21:51 index.html
-rw-r--r-- 1 root root  3601 Apr  6 21:51 index.html.gz
drwxr-xr-x 3 root root  4096 Apr  6 21:51 libs
-rw-r--r-- 1 root root    26 Apr  6 21:51 robots.txt
drwxr-xr-x 6 root root  4096 Apr  6 21:51 static
[root@hcss-ecs home]#

5、配置Nginx

        location / { ## nginx 默认配置root   /usr/share/nginx/html/;index  index.html index.htm;try_files $uri $uri/ /index.html;}location /oa { ## 前端oa项目# root   /usr/share/nginx/html/;root    /home/dist/;index  index.html index.htm;try_files $uri $uri/ /oa/index.html; ## 重要！！！注意二级目录}location /oa/api/ { ## 后端项目 - 管理后台proxy_pass http://localhost:48080/;  ## 重要！！！设置为后端项目所在服务器的 IPproxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}