使用jeecgboot框架打包前端代码,只需修改后端映射地址,即可实现部署多台服务器

工作上遇到一个要部署多台服务器的需求,后端代码打包后只需要修改application.yml文件端口号,数据库等即可部署,之前部署一台服务器的时候只需要修改.env.production文件中的路径即可
使用jeecgboot框架打包前端代码,只需修改后端映射地址,即可实现部署多台服务器_第1张图片
但是前端打包后,文件被压缩,找不到.env.production文件,经过搜索尝试后,需求已解决,特此记录一下。

1.在public目录下新建config.js文件

使用jeecgboot框架打包前端代码,只需修改后端映射地址,即可实现部署多台服务器_第2张图片

// window.g = {
//   // 开发环境
//   development: {
//     BASEURL: 'http://localhost:8080',
//     VERSION: '0.0.1',
//     MODE: 'development',
//     NODE_ENV: 'development'
//   },
//   // 生产环境
//   production: {
//     BASEURL: 'http://localhost:8085',
//     VERSION: '0.0.1',
//     MODE: 'production',
//     NODE_ENV: 'production'
//   }
// }

var developmentUrl = 'http://localhost:8080'
var productionUrl = 'http://localhost:8082'

const Glod = {
  developmentUrl: developmentUrl,
  productionUrl: productionUrl
}






2.在index.html引入config.js

使用jeecgboot框架打包前端代码,只需修改后端映射地址,即可实现部署多台服务器_第3张图片

3.修改src\config\index.js文件

使用jeecgboot框架打包前端代码,只需修改后端映射地址,即可实现部署多台服务器_第4张图片

/** init domain config */
import Vue from 'vue'
// const baseUrl = () => {//   return process.env.NODE_ENV === "development"
//     ? window.g.development.BASEURL
// : window.g.production.BASEURL;
// };
//设置全局API_BASE_URL
// Vue.prototype.API_BASE_URL = baseUrl() || process.env.VUE_APP_API_BASE_URL
// Vue.prototype.API_BASE_URL =  process.env.VUE_APP_API_BASE_URL
Vue.prototype.API_BASE_URL = process.env.NODE_ENV === "development"? Glod.developmentUrl:Glod.productionUrl || process.env.VUE_APP_API_BASE_URL
window._CONFIG['domianURL'] = Vue.prototype.API_BASE_URL
window._CONFIG['staticDomainURL'] = Vue.prototype.API_BASE_URL + '/sys/common/static'
window._CONFIG['pdfDomainURL'] = Vue.prototype.API_BASE_URL+ '/sys/common/pdf/pdfPreviewIframe'

4.将打包的dist文件修改名称为html,部署不同服务器的时候,只需要把html文件放在nginx目录下,并修改config.js文件中的productionUrl路径(对应后端代码路径)即可。

使用jeecgboot框架打包前端代码,只需修改后端映射地址,即可实现部署多台服务器_第5张图片

参考文章: https://yehaocheng520.blog.csdn.net/article/details/123640577?spm=1001.2014.3001.5506

你可能感兴趣的:(vue,前端,服务器,javascript,vue)