vue3如何创建多环境变量

 首先在全局目录中新建.env.development文件和.env.production文件、.env.test文件

.env.development文件

VITE_MODE_NAME='development'

VITE_API_URL="http://xxxxxxxxxx"

注意：必须要以VITE_ 去开头，否则获取不到 

依次去配置.env.production文件、.env.test文件

然后在vite.config.ts文件中获取环境变量

import { defineConfig ,loadEnv  } from 'vite'

export default defineConfig(({ command,mode  }) => {

const env = loadEnv(mode, process.cwd());  //重点！！！！

  console.log("当前环境", env);

})

配置package.json

"scripts": {

    "dev": "vite serve",

    "build:dev": "vite build ",

    "preview": "vite preview",

    "build-only": "vite build",

    "type-check": "vue-tsc --noEmit",

    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",

    "build:test": "vite build --mode test",

    "test": "vite serve --mode test",

    "build:prod": "vite build --mode production",

    "prod": "vite serve --mode production"

  },

 

通过启动、打包命令去调整你需要哪个环境