如何根据不同环境自动调整Vue项目中的请求URL？

本文共计940个文字，预计阅读时间需要4分钟。

一个项目的环境通常分为：本地环境、测试环境、预发环境、正式环境。这些环境的域名一般相同，前端请求接口的URL也会随环境变化而变化。手动修改有些繁琐，所以希望有个一键切换功能。

一般的项目环境分为：本地环境，测试环境，预发环境，正式环境。 这些环境的域名一般是一样的， 前端请求接口的url也会随着这些环境的变化而改变，手动修改有点麻烦，所以想个办法，让请求的地址根据域名改变而改变。

第一步：

建立一个RequestConfig.js 作为配置文件，内容如下：

const APIMapping = { project1: { test: '123.com', local: 'abc.com' }, project2: { test: '123.com', local: 'abc.com' } } const currentEnvMapping = { '127.0.0.1': 'test', 'localhost': 'local', } export { currentEnvMapping, APIMapping }

这里只列举了测试环境，和本地环境，其他环境使用方法一样。

APIMapping是所有的项目，这里有 project1，project2 ；每个项目分为本地环境（test），测试环境（local）;

currentEnvMapping 指明什么域名下使用本地环境的域名，还是测试环境的域名。