--- theme: cyanosis --- **这是我参与更文挑战的第3天，活动详情查看**： [**更文挑战**](https://juejin.cn/post/6967194882926444557) 前端打包目前主要是两个方面：打包压缩文件以及后台api访问地址。当然也涉及到其他的诸如nginx和docker部署，这些不在本文范畴。
# 打包命令其实很简单 ```bash npm run build ```
# 后台访问地址前端访问后台地址其实是需要区分本地开发和服务器部署。
## 本地开发访问：本地开发是开发环境，因为本地启动项目，开发环境可以通过接口代理的方式解决跨域相关问题，所以我们配置访问地址的时候会比较简单。

前端为了统一处理接口访问，会设置baseUrl，这里的bms是应用地址前缀。 ```javascript // 路径地址：src/services/baseUrl.js // eslint-disable-next-line import/no-mutable-exports let baseUrl = '/api/bms'; export default baseUrl; ``` 代理配置文件 ```javascript // 路径地址： 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去哪里了。因为这行代码： ```javascript pathRewrite: { '^/api/bms': '/' }, ``` 会将 **/api/bms** 通过代理变成 **/**

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

那我们服务器部署的接口访问地址就是：`http://xxxxx:8000/api/bms/interface`。然后开发环境的swagger地址是：``http://xxxxx:8001/interface``。这个肯定对应不上啊。所以就需要前端在当前这个**baseUrl.js**文件内部进行。

那现在我们的文件是相对路径，所以需要通过处理变成对应环境的绝对路径。

**这里会有一个问题？我们现在有三套环境，开发，测试，和生产。写哪一个呢，需要有一个变量来确定在不同的环境设置正确的后台访问地址接口。**
#### 可以用来判断环境的变量BUILD_TYPE 这里涉及到一个前端打包环境变量的概念：BUILD_TYPE。至于这个概念可以先不管，当时我们怎么理解呢。理解他就可以当成是一个变量，可以被设置值，可以被访问到。我们在baseUrl.js里都可以访问。我们可以通过判断这个变量的类型来决定baseUrl设置成哪个环境的api访问绝对地址。 ```javascript 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文件。

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f288e37c6b404536a95eca16992e6018~tplv-k3u1fbpfcp-zoom-1.image)
从图中可以看到我画圈圈的地方有三个命令，三个命令都有设置BUILD_TYPE，看到这里应该已经知道这里是干什么用的了吧，这里就是为了区分不同环境，通过不同的打包命令，然后设置不同的BUILD_TYPE，看到这里其实前端需要处理的地方已经处理完了。但是这里只是将命令写好了，但是谁来触发这个命令啊，服务器又不会向我们还可以自己去执行命令，而且需要人工的话，就有点太low了。 #### cicd命令配置【.gitlab-ci.yml文件】 **开发环境**
因为现在我们的环境部署基本都是走docker + nginx + cicd命令了。所以相关的还是要了解一下的。

**开发环境配置**：
开发环境就会走yarn build，其实对应就是下面的这个图片，所以这样就形成闭环了啊，提交代码到develop，cicd运行下面的命令，然后会设置BUILD_TYPE为build，然后打出来的后端访问地址就是：上面配置的开发环境的访问地址`http://xxxxxx:8001/api/bms`
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9fed42ef7f7540518b9a860515927d97~tplv-k3u1fbpfcp-zoom-1.image)
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1954a83adb7848b78e3d36731b2077c3~tplv-k3u1fbpfcp-zoom-1.image)
**测试环境 & 生产环境**
原理和上面相同，唯一不同的是，分支代码打测试环境tag的时候，我们不能执行开发环境的命令了啊，要执行测试环境的命令。
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b5d0df73d3cc45be8d3c6a6662b525cd~tplv-k3u1fbpfcp-zoom-1.image) ### 后端需要注意的点：以前碰到过的是，前期开发好好的，等到部署环境的时候就会出现跨域的问题，然后找后端的同学，就会问，为啥啊，不是一直用的好好的嘛。 **回答**：因为前期开发走的本地环境，本地做了接口代理处理，项目结构自带的，所以不会有问题。一旦走了服务器部署，就需要后端接口做跨域处理了。因为处理跨域有很多种办法，**前端代理**或者**后端做跨域**处理。所以有时间前端还是后端的同学都需要了解一下同源策略和跨域处理。
# nginx代理处理后端服务地址问题经过在个别项目当中发现，部署环境存在有的时候打包的接口地址没有按照预期的访问，可能我打的是**qa环境，但是部署出来的地址还是开发环境的地址**，具体原因应该是cicd的环境变量问题。后来我们的项目就是用nginx统一转发
**前端build的时候不设置baseUrl**，统一相对路径/api/，通过服务器一次性设置代理转发。比如：/api/统一访问接口，其他的访问前端资源。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56ee366d93ba40c88fa0c30872de2dd0~tplv-k3u1fbpfcp-watermark.image)