vite配置开发环境和生产环境

为什么需要境变量的配置

在很多的时候，我们会遇见这样的问题。

开发环境的接口是:http://test.com/api

但是我们的生产环境地址是：http://yun.com/api

此时，我们打包的时候自动获取生产环境的值，vite为我们提供了这样的方式。

下面我们来看一下怎么操作

境变量的配置

在项目的根目录下，创建 .env.development文件[开发]和.env.production[生产]。

在这两个文件中声明一个变量值。

VITE_NAME='生产环境'  (.env.production 文件中写的)

VITE_NAME='开发环境'  (.env.development 文件中写的)

需要注意的是，我们需要以'VITE_'大写开头。然后重新启动服务{一定要重新启动服务}

然后我们可以通过 import.meta.env 获取我们定义的值。

有的小伙伴可能会说，如果大量的地方需要获取环境 import.meta.env。

我们可以进行优化，我们可以将这个方法挂载到vue的原型上

将方法挂载到vue3.0的原型上

//在main.ts文件中
let app = createApp(App)
// 将获取环境的方法挂载到vue的原型上，方便后面的使用
app.config.globalProperties.getEnv =import.meta.env
app.use(router).use(store).use(Button).use(VanImage).mount('#app')

如何使用原型中的方法

//引入
const { proxy }: any = getCurrentInstance();
console.log('输出的值',proxy.getEnv )
//这样就可以获取环境了。