【vite】vite多环境配置

1. 在应用 v3-demo 根目录下创建环境变量文件夹env

2. 在 env 文件夹中创建文件.env和.env.dev

• .env 用来存放多个环境变量中的公共配置
• .env.dev 中用来存放 dev 环境变量配置，样例如下

 # 请求固定前缀
  VITE_SERVER_API='/api'
  # 服务器地址
  VITE_SERVER='http://127.0.0.1:9080/xxx'

3. 在package.json中配置开发环境使用.dev

"scripts": {
// 注意：mode用来指定绑定的环境，dev要与.env.dev中.env.后面的内容保持一致
  "dev": "vite --mode=dev", 
 }

4. 修改vite.config.ts，添加env支持

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

    // 设置环境变量包地址
    const envDir = '/env'
    // 获取环境变量
    const env = loadEnv(mode, process.cwd()+envDir)

    return {
      envDir: '.'+envDir,
      server: {
        host: '0.0.0.0', // 指定服务器监听的地址，解决“vite use `--host` to expose”问题
        port: 5173, // 默认监听端口：5173
        hmr: true, // 是否进行热更新
        open: true, // 启动后自动打开浏览器
        proxy: {
          // 开发环境跨域代理设置
          [env.VITE_SERVER_API]: {
            target: env.VITE_SERVER,  // 获取数据的服务器地址设置
            changeOrigin: true, // 运行跨域
            rewrite: (path) => path.replace(/^/api/, ''),
          },
        }
      }
      }
  })

5. 在应用中使用env中设置的变量

 const server = import.meta.env.VITE_SERVER_API ;