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

1.npm create vue@latest生成一个vue3的项目

2.在项目的根目录里创建 .env.development 和 .dev.production文件 分别写上不同的环境变量和你想要输出的任何变量
  在 .env.development 里
  VITE_BASE_URL="http://www.development.com"
  在 .env.production 里
  VITE_BASE_URL="http://www.production.com"

3.在vite里可以通过 import.meta.env获取当前环境里变量
  a.在index.html里
    i.<h1>当前的环境是%MODE%</h1>
    ii.<p>当前的baseURL是%VITE_BASE_URL%</p>
  b.axios的封装实例中
  c.axios.cerate({baseUrl: import.meta.env.MODE == 'development' ? 'http://www.development.com':'http://www.production.com'})

4.配置自定义的打包或者压缩环境
  配置一个测试环境
  新建.env.test文件 写入以下内容
  VITE_BASE_URL="http://www.test.com"

5.在package.josn里添加脚本命令
  "build:test": "vite build --mode test"
  这样的话就可以根据环境配置不同的url

官网https://cn.vitejs.dev/guide/env-and-mode.html

npm run dev 或者 npm run build:test 来启动不同的环境

环境文件的命名格式： .dev.[环境的名称] ex: .env.staging 预发环境的配置