vue3 中 .env环境变量使用

说实话我以前也不喜欢使用配置文件的形式来获取变量
1.在项目的根目录就是与package.json一级建立文件

.env.dev
.env.pro

.env.dev文件如下 (测试环境) 必须已VITE_开头

NODE_ENV  = 'development'
VITE_BASE_URL='http://localhost:4000/'
VITE_BASE_URLPACHONG='http://localhost:5004/'

.env.pro文件如下 （**正式环境**）必须已VITE_开头

NODE_ENV  = 'production'
VITE_BASE_URL = 'http://xxxxx.com/'
VITE_BASE_URLPACHONG='http://cccc.com/'

2.修改一下package.json文件的启动方式

package.json文件

 "scripts": {
    "dev": "vite --mode dev",
    "build": "vite build --mode pro",
    "preview": "vite preview"
  },

这样就配置完毕
比如我们在axiso中使用，一般项目都会分测试环境，生产环境

 const instance = axios.create({
    baseURL: import.meta.env.VITE_BASE_URL,
    timeout: 10000,
  })

import.meta.env.VITE_BASE_URL

东西简单记录一下以后忘记的时候直接打开看一眼，还是很实用