vue3 - 28.Vue环境变量

环境变量的主要作用是让开发者区分不同的运行环境，比如：生产，测试，开发

1.vue自带的环境变量：

<script setup lang='ts'>
  console.log(import.meta.env)
  /*
  {
    "BASE_URL": "/",        //部署时的URL前缀
    "MODE": "development",  //运行模式(开发环境)
    "DEV": true,            //是否在dev环境(确认是否在开发环境)
    "PROD": false,          //是否是build 环境
    "SSR": false            //是否是SSR 服务端渲染模式
  }
  */
</script>

需要注意的一点就是这个环境变量不能使用动态赋值import.meta.env[key] 应为这些环境变量在打包的时候是会被硬编码的通过JSON.stringify 注入浏览器的

配置自定义环境变量：

1).在项目根目录下新建一个开发环境下的env文件：

.env.development：

VITE_HTTP = http://www.baidu.com/

2).我们再新建一个生产环境下的env环境变量文件

.env.production:

VITE_HTTP = http://www.jd.com/

3).需要在package.json配置才能生效：

package.json: