如何在vue3 vite项目中配置开发与生产环境全局变量？

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

目录

一、开发环境和生产环境

二、配置环境变量

三、使用全局变量

总结

一、开发环境和生产环境

开发环境：也是编码时使用的环境，即编码时运行的环境，也就是编码时使用的npm+run+dev或者npm+run+serve命令运行的环境。

目录

• 一、开发环境和生产环境
• 二、配置环境变量
• 三、使用全局变量
• 总结

一、开发环境和生产环境

开发环境：也就是编码时运行的环境，即我们使用npm run dev或者npm run serve运行项目到本地时，项目处于的环境。

生产环境：项目部署到服务器上后处于的环境，我们使用npm run build将项目打包以后，再运行项目，项目就运行在生产环境中了。

对于不同的环境，我们可以配置不同的环境变量，来实现开发和生产的兼容。

例如：

开发环境时，我们可以请求自己本地的接口（‘/api’ proxy代理）。

而部署到服务器上后，应该请求服务器提供的接口（‘xxxxxx/api/’ 真实接口）。

我们通过设置axios的baseUrl可以实现，但是需要区分开发环境和生产环境，从而改变baseUrl。