打包命令其实很简单

npm run build
复制代码

后台访问地址

前端访问后台地址实际上是须要区分本地开发和服务器部署。
java

本地开发访问：

本地开发是开发环境，由于本地启动项目，开发环境能够经过接口代理的方式解决跨域相关问题，因此咱们配置访问地址的时候会比较简单。

前端为了统一处理接口访问，会设置baseUrl，这里的bms是应用地址前缀。nginx

// 路径地址：src/services/baseUrl.js

// eslint-disable-next-line import/no-mutable-exports
let baseUrl = '/api/bms';

export default baseUrl;
复制代码

代理配置文件git

// 路径地址： config/config.js

proxy: {
  '/api/bms': {
    target: 'http://xxxxx:8000/', 
    changeOrigin: true,
    pathRewrite: { '^/api/bms': '/' },
  },
},
复制代码

这里的**/api/bms对应的是baseUrl.js的baseUrl。访问地址的时候：接口访问的是 /api/bms/interface*。经过代理会变成 http://xxxxx:8000/interface 这里可能会问，api/bms去哪里了。由于这行代码：web

pathRewrite: { '^/api/bms': '/' },
复制代码

会将 /api/bms 经过代理变成 /

docker

服务器部署地址：

前端部署：

本地环境和服务器部署的理解

由于服务器部署走的打包文件，和本地开发大不相同，没有代理了，访问的都是静态文件。因此这时候咱们的代码里只有baseUrl.js里的/api/bms了。这个是相对路径，直接访问会有问题。举个简单的例子：目前bms的开发环境部署地址是：
http://xxxxx:8000

那咱们服务器部署的接口访问地址就是：http://xxxxx:8000/api/bms/interface。而后开发环境的swagger地址是：http://xxxxx:8001/interface。这个确定对应不上啊。因此就须要前端在当前这个baseUrl.js文件内部进行。

那如今咱们的文件是相对路径，因此须要经过处理变成对应环境的绝对路径。

这里会有一个问题？咱们如今有三套环境，开发，测试，和生产。写哪个呢，须要有一个变量来肯定在不一样的环境设置正确的后台访问地址接口。
npm

能够用来判断环境的变量BUILD_TYPE

这里涉及到一个前端打包环境变量的概念：BUILD_TYPE。至于这个概念能够先无论，当时咱们怎么理解呢。理解他就能够当成是一个变量，能够被设置值，能够被访问到。咱们在baseUrl.js里均可以访问。咱们能够经过判断这个变量的类型来决定baseUrl设置成哪一个环境的api访问绝对地址。json

let baseUrl = '/api/bms';

// eslint-disable-next-line no-undef
if (BUILD_TYPE === 'build') {
  baseUrl = 'http://xxxxxx:8001/api/bms';
}

if (BUILD_TYPE === 'qa') {
  baseUrl = 'http://yyyyy:8001/api/bms';
}

if (BUILD_TYPE === 'release') {
  baseUrl = 'http://zzzzzz:8001/api/bms';
}

export default baseUrl;

复制代码

设置环境变量BUILD_TYPE

上面讲的是使用BUILD_TYPE，可是这个值在哪里设置的呢，在咱们执行打包命令的时候。package.json文件。

从图中能够看到我画圈圈的地方有三个命令，三个命令都有设置BUILD_TYPE，看到这里应该已经知道这里是干什么用的了吧，这里就是为了区分不一样环境，经过不一样的打包命令，而后设置不一样的BUILD_TYPE，看到这里其实前端须要处理的地方已经处理完了。可是这里只是将命令写好了，可是谁来触发这个命令啊，服务器又不会向咱们还能够本身去执行命令，并且须要人工的话，就有点太low了。后端

cicd命令配置【.gitlab-ci.yml文件】

开发环境
由于如今咱们的环境部署基本都是走docker + nginx + cicd命令了。因此相关的仍是要了解一下的。

开发环境配置：
开发环境就会走yarn build，其实对应就是下面的这个图片，因此这样就造成闭环了啊，提交代码到develop，cicd运行下面的命令，而后会设置BUILD_TYPE为build，而后打出来的后端访问地址就是：上面配置的开发环境的访问地址http://xxxxxx:8001/api/bms

测试环境 & 生产环境
原理和上面相同，惟一不一样的是，分支代码打测试环境tag的时候，咱们不能执行开发环境的命令了啊，要执行测试环境的命令。

后端须要注意的点：

之前碰到过的是，前期开发好好的，等到部署环境的时候就会出现跨域的问题，而后找后端的同窗，就会问，为啥啊，不是一直用的好好的嘛。

回答：由于前期开发走的本地环境，本地作了接口代理处理，项目结构自带的，因此不会有问题。一旦走了服务器部署，就须要后端接口作跨域处理了。由于处理跨域有不少种办法，前端代理或者后端作跨域处理。因此有时间前端仍是后端的同窗都须要了解一下同源策略和跨域处理。

nginx代理处理后端服务地址问题

通过在个别项目当中发现，部署环境存在有的时候打包的接口地址没有按照预期的访问，可能我打的是qa环境，可是部署出来的地址仍是开发环境的地址，具体缘由应该是cicd的环境变量问题。后来咱们的项目就是用nginx统一转发

前端build的时候不设置baseUrl，统一相对路径/api/，经过服务器一次性设置代理转发。好比：/api/统一访问接口，其余的访问前端资源。

前端环境部署如何配置后端接口地址