在Vue 3项目中区别测试环境和本地环境,并标记接口的方法可以通过环境变量来实现。
首先,你可以在你的项目根目录下创建一个.env
文件,并定义你的环境变量。比如,你可以创建.env.local
作为本地环境的配置文件,.env.test
作为测试环境的配置文件。
在这些配置文件中,你可以定义一些接口标记的变量,如:
# .env.local
VUE_APP_API_ENDPOINT=http://localhost:3000
# .env.test
VUE_APP_API_ENDPOINT=https://test-api.example.com
接下来,在你的代码中,你可以使用这些环境变量来标记你的接口。在Vue 3项目中,你可以在组件中使用process.env.VUE_APP_
前缀来访问这些环境变量。
// 在你的组件中
const apiEndpoint = process.env.VUE_APP_API_ENDPOINT;
然后,你就可以根据不同的环境变量来确定接口地址。
当你使用npm run serve
启动本地开发服务器时,Vue CLI 会默认读取.env.local
文件中的环境变量。
当你使用npm run build
进行项目打包时,Vue CLI 会根据你的打包命令来读取对应的环境变量文件。比如,你可以使用npm run build --mode test
来指定使用测试环境的配置文件.env.test
。