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)目录, 相对于 outputDir
  assetsDir: '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/;  ## 重要！！！设置为后端项目所在服务器的 IP
            proxy_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;
        }

6、重启nginx 服务

service nginx restart

7、启动成功！

        二级目录页面，点击浏览器刷新也能正常访问，发布成功。

        一级页面，nginx 默认页面正常展示

总结：

        几个关键的URL 不能错，不要多加/,可能会导致static页面无法加载，或刷新后页面发生不符合预期跳转。