vite，vue cli配置环境变量

官网

1. vite官网
2. vue cli官网

注意点

1. vite里面打印环境变量是import.meta.env
2. vue cli里面打印环境变量是process.env

vite实现配置环境变量的方法

1. 首先在文件根目录下创建两个文件.env和.env.production

    //.env
    VITE_SOME_KEY=123
    VITE_DB_PASSWORD=foobar
    VITE_BSEL_URL=/api

    //.env.production
    VITE_SOME_KEY=456 
    DB_PASSWORD=foobar
    VITE_BSEL_URL=/lineapi

2.在package.json里面添加启动命令

    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "dev:production":"vite --mode production"//production是.env.production的后缀
      }

3. 启动npm run dev 在main.js里面打印一下import.meta.env.VITE_SOME_KEY会发现是123
4. 启动npm run dev:production 在main.js里面打印一下import.meta.env.VITE_SOME_KEY会发现是456
5. 当我们启动npm run dev:production 在main.js里面打印一下import.meta.env.DB_PASSWORD会发现是undefined。注意：在vite里面配置环境变量必须以VITE_开头

vite实现启动不同命令切换不同域名

1. 上面我们在.env和.env.production分别配置了VITE_BSEL_URL
2. 在我们封装的axios请求文件里面修改baseURL

    let baseURL = import.meta.env.VITE_BSEL_URL;
    console.log(import.meta.env.VITE_BSEL_URL, "utils");
    const instance = axios.create({
      baseURL,
    });

3.分别启动npm run dev和npm run dev:production会发现我们在封装的axios文件里面打印了对应文件的VITE_BSEL_URL