[JavaScript知识库]ruoyi前后端分离之前端vue管理页面打包部署

如果管理页面是以根目录形式访问，那这里就不需要配置了，直接编译打包部署到nginx就可以了，但要加项目名的形式就需要部分修改了

假设管理页面项目名：admin
后端项目名：pro-api

修改文件.env.production

//如果前后端都在同个nginx下，直接配置后端项目名称
//VUE_APP_BASE_API = '/pro-api'
//如果前后端不在通过nginx下，这里用ip+port+项目名
VUE_APP_BASE_API = '//localhost:8080/pro-api'

修改vue.config.js

// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
publicPath: process.env.NODE_ENV === "production" ? "/admin/" : "/",

修改路由src/router/index.js

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

修改src/layout/components/Navbar.vue

this.$store.dispatch('LogOut').then(() => {
   // location.href = '/index';
   //修改退出路径为/admin
    location.href = this.$router.options.base;
  })

打包部署到nginx

nginx配置

location /admin/ {
      root   D:\Project\demo\dist;
      index  index.html index.htm;
  }
location /pro-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://localhost:8080/;
	}