为vue程序多环境部署设置动态路由
问题的提出
Vue前端+springboot后端的开发架构很普遍，一般最终以war的形式部署到tomcat中运行。
笔者在开发、测试、部署时，由于环境不一致，需要不断改变vue前端的配置，导致一些不必要的重复工作。具体见下表，
|
运行环境 |
web服务器 |
前端访问后端的路径 |
|
|
开发时 |
vue采用ide自带的内置web服务 |
路径为”/”，即位于web服务器根目录。 |
|
|
测试时 |
开发电脑中的tomcat |
路径一般为”/XXX-1.0-TEST” |
|
|
发布时 |
服务器tomcat |
路径一般为”/XXX-1.0-REL” |
|
开发时，vue采用ide自带的内置web服务，一般其项目路径为”/”，即位于web服务器根目录。
测试时，war包部署在本机tomcat中，为与正式发布版区分，其项目路径一般为”/XXX-1.0-TEST”
发布时，war包部署在服务器tomcat中，为正式发布版，其项目路径一般为”/XXX-1.0-REL”
可见，由于运行环境的改变，需要对前端代码中访问后端的路由做出改变。因此可能导致产生3套代码，每套代码对应一种运行环境。但其产生的问题也是明显的，比如重复代码导致后续修改的工作量加倍。
因此，有没有一种办法，采用同一套源代码能够编译出对应不同运行环境的发布包呢？
2，问题分析
vue.config.js文件提供了一个参数publicPath，可设置运行环境下的根路径（base URL）。
但是，该参数能否动态设置呢？
另外，前端可能有些访问后端服务的路径，也需要动态设置。
在网上搜索文章，发现了参考文章1，在其启发下进行了实践，验证可行。
3，操作步骤
3.1 增加环境参数文件
首先，针对不同的环境，在项目根目录下增加三个环境参数文件
.env.development
.env.production
.env.test
在其中均写入BASE_URL和BASE_API两个参数，如
.env.production中写入：
BASE_URL = '/jx-quarter-1.0-PROD'
BASE_API = '/jx-quarter-1.0-PROD'
.env.test中写入：
BASE_URL = '/jx-quarter-1.0-TEST'
BASE_API = '/jx-quarter-1.0-TEST'
3.2 修改vue.config.js
将其中publicPath 参数设置为 process.env.BASE_API，如：
module.exports = {
publicPath: process.env.BASE_API,
3.3 修改package.json
此处是关键，针对不同环境，生成不同的发布文件。
将其中scripts 项改为如下，将build选项与环境关联起来：
"scripts": { "serve": "vue-cli-service serve", "build:test": "vue-cli-service build --mode test", "build:prod": "vue-cli-service build --mode production", "build:dev": "vue-cli-service build --mode development" },
3.4 执行build
根据需要，选择执行如下build指令：
npm run build:dev
npm run build:test
npm run build:prod
然后，将dist目录下的文件拷贝到 后端springboot项目的 static目录中。
以上步骤，针对的是前端VUE代码的处理；下面是对后端项目的处理。
3.5 后端执行build
后端项目运行 以下打包指令，在target目录下生成war文件：
mvn clean package -f pom.xml
war文件的名称由程序中的 <artifactId> <version>配置项决定。
如下述配置产生的war文件名称为jx-quarter-1.0.war：
<artifactId>jx-quarter</artifactId> <version>1.0</version>
那么这个war部署到服务器上后，其base URL就是 /jx-quarter-1.0
显然这个url与前端需要访问的任何一种环境都对不上，因此war在部署前需要改名。
3.6 war包改名并部署
根据前端build的选项，将war改为相一致的名称。
若前端采用 npm run build:test生成，那么war包文件改名为.env.test中的BASE_URL，即jx-quarter-1.0-TEST.war
若前端采用 npm run build:prod生成，那么war包文件改名为.env.production中的BASE_URL，即jx-quarter-1.0-PROD.war
然后，将war包部署到tomcat服务器的webApps目录中。
3.7 其它问题
至此，采用同一套代码在不同环境下的部署，已经完成。实测运行正常。
另外当初还有个问题未回答，就是前端可能有些访问后端服务的路径，也需要动态设置。
解决办法也是一样的。
在前端访问后端服务的路径中，根据配置取得base URL，即可获得正确的路径。如下图所示：
export const postRequest = (url, params) => { let base = process.env.BASE_URL; return axios({ method: 'post', url: `${base}${url}`, data: params }) }
4，总结
在此感谢参考文章的作者。受其启发，经过实践，成功满足了vue程序多环境部署设置动态路由的需求。一些重点总结如下：
1) 通过.env.XXX 环境参数文件设置不同的base URL路径。在代码中采用process.env.BASE_URL方式引用参数。在npm run build时选择运行环境。以上三步，将代码运行环境动态化。
2) 前后端的路径要一致。前端访问的url和后端提供服务的url要一致。否则出错。
3) 后端提供服务的base url，可以通过修改war文件名来实现。实测Springboot程序可以由同一个war包改名而进行重复部署，tomcat仍把它们看做是不同的服务，虽然其功能完全一致，这就为同一个tomcat服务器上同时部署测试和生产两套环境提供了可行性，为在不停止生产运行环境下debug一些依赖生产环境的错误提供了基础。
