工作上遇到一个要部署多台服务器的需求,后端代码打包后只需要修改application.yml文件端口号,数据库等即可部署,之前部署一台服务器的时候只需要修改.env.production文件中的路径即可
但是前端打包后,文件被压缩,找不到.env.production文件,经过搜索尝试后,需求已解决,特此记录一下。
1.在public目录下新建config.js文件
// 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
3.修改src\config\index.js文件
/** 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路径(对应后端代码路径)即可。
参考文章: https://yehaocheng520.blog.csdn.net/article/details/123640577?spm=1001.2014.3001.5506