vue-cli3 配置不同环境请求地址，以及打包到不同文件夹

Posted 2023-03-09

参考技术A

.env.development

.env.test

.env.production

如果一个环境中，有多个不同请求地址，可以在环境配置文件中多配置几个 url，使用时，不配置 baseURL，相同请求地址接口写入一个文件，引入相应的 url，接口前单独加 url。

package.json scripts 配置

serve 命令不携带 --mode 时，默认运行环境为 development
build 命令不携带 --mode 时，默认运行环境为 production

可根据当前环境写死，也可在环境配置文件中，加入打包到的文件夹名（有多个环境的时候比较方便）。

vue.config.js 配置

打包出来的文件不提交到 git 的话，配置 .gitignore。 将之前的 /dist 改为 /*dist

vue-cli3抽离配置文件

　　由于项目有外部部署需求，对不同的环境前端调用后台的地址不一样，且不能提前预知必须到部署现场后才能确定后端地址，故需要将调用后端相关的配置抽离到文件中，打包后部署人员在方便现场修改。

　　思路如下：

　　1.由于项目中vue初始化部分有很多网络请求，所以必须在加载vue的内容之前引入配置，为解决异步请求问题直接在public/index.html的header中引入配置（vue在body后注入）。

　　2.配置放在js文件中，js文件中将配置对象放到localStorage中。有方法是将配置对象赋值给window顶级对象，感觉这样不安全，故采用放到localStorage的方式。

　　3.在需要使用配置的地方，反序列化localStorage，取出其中的配置项使用。

 

　　操作方法：