webpack,vite将环境变量挂在到window上

635 阅读2分钟

这几天发生了个事儿。由于项目需要发布办公网访问,办公网访问得走流水线,流程如下:

1. 跑uat-uat环境的流水线,并将项目Label进行关联
2. 通知测试人员出测试报告,并将项目Label写入测试报告,审核
3. 审核之后,由产品经理发起上线流程
4. 晚上机房进行流水线上线

这个流程很好,但也不好。好则在于方便流程透明化、公开化,项目结项、回顾会等等。不好则在于如果本地测试没有做好的话,则需要重新走一遍流程,非常的麻烦。

大多数时候代码没什么问题,那么办公网的代码也没什么问题。但有的时候比如环境变量写错了一个值,导致办公网网页无法访问或者说其他的报错,就非常恼火。

故,最近着手将前端好几个项目的环境变量在打包的时候写入一个配置文件,并将其挂在到window对象上。这样就可以做到打包上线之后,通过修改生成的配置文件,做到环境变量的变更。

具体如下

vite

  1. 安装依赖包
npm install fs-extra vite-plugin-html -D
  1. vite.config.js
import { ensureDirSync, emptyDirSync, writeFileSync } from 'fs-extra'
import { createHtmlPlugin } from 'vite-pugin-html'

function buildEnvJs() {
  const envJsonString = JSON.stringfy(import.meta.env, null, 2)
  ensureDirSync('./public/env')
  emptyDirSync('./public/env')
  writeFileSync(`./public/env/env-config.${import.meta.env.VITE_BUILD_ENV}.js`, `window.envConfig = ${envJsonString}`, 'utf-8')
}

export default (configEnv: ConfigEnv): UserContextExport => {
  buildEnvJs()
  return {
     ...,
     plugins: [
       createHtmlPlugin({
          minify: true,
          template: './index.html',
          inject: {
            data: {
              envConfigScript: `<script src="/env/env-config.${import.meta.env.VITE_BUILD_ENV}.js"> </script>`
            }
          }
       })
     ],
     ...
  }
}
  1. 修改./index.html 在文件中的header内添加<%- envConfigScript %>

webpack

webpack主要针对vue-cli的vue项目。

  1. 安装依赖包
npm install fs-extra -D
  1. vue.config.js代码
import { ensureDirSync, emptyDirSync, writeFileSync } from 'fs-extra'

function buildEnvJs(envRecord) {
  const envJsonString = JSON.stringfy(envRecord, null, 2)
  ensureDirSync('./public/env')
  emptyDirSync('./public/env')
  writeFileSync(`./public/env/env-config.${process.env.NODE_ENV}.js`, `window.envConfig = ${envJsonString}`, 'utf-8')
}

buildEnvJs(Object.entries(process.env)
                 .filter(item => item[0].startsWith('VUE_APP'))
                 .reduce((res, [k, v]) => {
                   res[k] = v
                   return res
                 },{}))
  1. 修改public/index.html 在文件中的header内添加 <script src="<%= BASE_URL %>env/env-config.<%= NODE_ENV %>.js"> </script>

希望下次发布办公网的时候不会有问题,就算有也只是改一下环境变量,而不是走一遍上线流程