一、前言

若依官网项目部署手册,前端部署到80端口一级域名下的。一级域名官网占用,这时就需要配置二级域名。

二、ruoyi-ui 前端vue配置

2.1 配置vue.config.js

修改publicPath

module.exports = {
  // 部署生产环境和开发环境下的URL。
  // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。
  //publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
   publicPath: process.env.NODE_ENV === "production" ? "/admin/" : "/admin/",
  // 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist)
  outputDir: 'dist',
  // 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
  assetsDir: 'static',
  // 是否开启eslint保存检测,有效值:ture | false | 'error'
  lintOnSave: process.env.NODE_ENV === 'development',
  // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,

2.2 配置router

修改router目录下的index.js文件
添加 base:‘admin’

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

2.3 配置登出地址

修改/src/layout/componets/Navbar.vue文件里的logout()方法

  methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          // location.href = '/index';
          location.href = '/admin'
        })
      }).catch(() => {});
    }
  }

三、Nginx配置

一级域名一般部署的是公司官网website-dist,二级域名部署后台项目ruoyi-dist。


server {
        listen       80;
        server_name  localhost;
		charset utf-8;
		
        location / {
            root   /root/website/website-dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

		location /admin {
            alias  /home/ruoyi/ruoyi-dist;
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		
		location /prod-api/ {
			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;
			proxy_pass http://127.0.0.1:9004/;
		}
 
    }

Logo

快速构建 Web 应用程序

更多推荐