vue能否实现向后端一样再部署时动态配置。

Question

vue项目下有3个环境变量文件：.env.test、.env.prod1、.env.prod2，每次发布都需要生成这3中环境的静态文件（可能有更多）。3个环境的代码都一样只是环境变量不同。所以打包就要打3次，比较麻烦。请问有没有什么方式可以像后端一样只打一次包，配置文件放在外部，加载相应的配置文件实现多个环境使用一个包？

现在的解决办法是：打包时添加一个打包插件，把环境变量替换成一个标记，在部署的时候使用一个工具取到对应的配置后替换标记的代码。但是这种方式比较局限。请问大佬们有没有什么更好的解决办法

附上插件地址：https://gitee.com/mcck-tools/...

Answer 1

比如项目录入结构如下

dist
src
config/api.js
index.html

在index.html中引入配置js文件
<script src="config/api.js"></script>

config/api.js的代码如下
window.server = {

"api_prefix": "https://segmentfault.com/"

}

可以在vue中直接用这个变量

...  
mounted() {
    console.log(window.server.api_prefix)
  },
...

注意打包的时候不要把config目录一起打包，放在各个环境的服务器上

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

提供一种思路
在webpack或者vite的配置文件中获取到环境变量，然后用 node 动态生成静态js文件
调用generateBaseURLFile方法即可 环境变量名称根据自己项目更改

import { writeFileSync } from 'fs'

export const generateBaseURLFile = () => {
  const path = './public/api.js'

  // vue-cli 项目中
  const VITE_APP_BASE_API = process.env.VITE_APP_BASE_API  // 或者vite 的loadEnv

  const options = {
    BASE_API: VITE_APP_BASE_API
  }
  const data = Object.keys(options)
    .map(key => `window.${key} = "${options[key] || ''}";`)
    .join('\n')

  writeFileSync(path, data)
}

生成的静态文件会放在public文件夹下（打包自然会拷贝到打包目录）
public/api.js

window.BASE_API = "http://0.0.0.0/api";

然后在index.html 中导入 api.js , 请求地址就是window.BASE_API， 这样打包的时候可以用到 .env 文件 打包后可以直接改api.js,两不误。