Vite如何对开发环境和正式环境设置不同环境变量值

不同的环境有不同的环境变量值很正常,开发环境连开发环境的后端,正式环境连正式的环境的后端.所以需要对不同的环境变量进行配置.不过Vite自己就内建处理这类需求的方法.

.env文件

vite预设有两种环境: development(开发环境),production(正式环境),先在根目录下建立两个对应的.env环境.

.env.development 文件内容大概如下,内容就是在不同环境会不一样,需要自行定义值:

VITE_API_HOST='http://localhost:8005'
VITE_OPEN_API_KEY='sk-proj-2MT'

注意,key值需要 用 VITE_开头才会读的到

内建环境变量:

vite有几个内建的环境变量

• import.meta.env.MODE:{string}应用运作的模式
• import.meta.env.BASE_URL:{string}部署应用程序时的基本URL.它由base配置决定.
• import.meta.env.PROD:{boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)
• import.meta.env.SSR: {boolean} 应用程式是否运行在 server 上

直接来测试,在开发环境执行npm run dev,用console.log打印这些值查看.

如果是在正式环境就可以看到 import.meta.env.MODE 的值是 production

读取设定值

举例我要读取`.env.development的 VITE_API_HOST 这个值.

const apiHost = import.meta.env.VITE_API_HOST; // http://localhost:8085
console.log(apiHost)

这样就简单可以取得值.

Build

一般执行

npm run build

建置后的结果是读取 .env.production 这个档案的环境变量

如果要建置读取 .env.development 开发环境，可以执行

npm run build --mode development

两个以上的环境

如果有两个以上的环境，像是 qa 测试环境

• 建立 .env.qa文件
• 执行 npm run build -- --mode qa

这样就会加载 .env.qa 的环境变量(另外也可以安装dotenv包,更多的进行不同环境配置)

vite.config.js关键配置

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import dotenv from "dotenv";
import { join } from "path";
dotenv.config({ path: `.env.${process.env.NODE_ENV}` });
// https://vitejs.dev/config/
export default defineConfig({
  base: process.env.VITE_BASE_PATH,
  define: {
    "process.env": process.env
  },
  plugins: [react()],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  },
  resolve: {
    alias: {
      "@": join(__dirname, "src")
    }
  },
  server: {
    open: false,
    port: 3003, // 本地端口号
    host: "0.0.0.0",
    proxy: {
      // 请求代理地址(仅开发环境有效)
      "/api": {
        target: "http://xxx.com/",
        changeOrigin: true,
        secure: true, // 如果是https接口，需要配置这个参数
        ws: true //websocket支持
        // rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  build: {
    outDir: "dist", // 打包后文件包名称
    rollupOptions: {
      output: {
        entryFileNames: "js/[name]-[hash].js",
        chunkFileNames: "js/[name]-[hash].js",
        // 字符串方法
        // assetFileNames:'[ext]/[name]-[hash].[ext]'
        assetFileNames(assestInfo) {
          if (assestInfo.name.endsWith(".css")) {
            return "css/[name]-[hash].css";
          }
          const imgExts = [
            ".png",
            ".jpg",
            ".jpeg",
            ".webp",
            ".svg",
            ".gif",
            ".ico"
          ];
          if (imgExts.some(ext => assestInfo.name.endsWith(ext))) {
            return "imgs/[name]-[hash].[ext]";
          }

          return "assest/[name]-[hash].[ext]";
        }
      }
    }
  }
});

pageage.json 中script执行脚本

  "scripts": {
    "dev": "NODE_ENV=development vite",
    "build": "vite build --mode production",
    "preview": "vite preview"
  },