跳到主要内容

cross-env

2023年12月19日
柏拉文
越努力，越幸运

一、认识​

cross-env 用来设置node环境的process.env.NODE_ENV。注意： 浏览器环境是不会识别的。

二、命令​

三、文件​

3.1 .env​

语法: 如果某个环境变量要在 Vite 中通过 import.meta.env 访问，那么它必须以 VITE_ 开头(除了本身自带的)

NODE_ENV=development // 本身自带 

VITE_IMG_BASE_URL=https://my-image-cdn.com // 额外新增

优先级:

  • 开发环境优先级: .env.development > .env

  • 生产环境优先级: .env.production > .env

3.2 .env.development​

3.3 .env.production​

四、用法​

4.1 替换全局 base​

替换全局 base 适用于替换所有位于项目中的静态资源地址, 配置如下:

vite.config.ts 配置

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

const baseMap: { [key: string]: string} = {
  development: '/',
  production: 'https://my-cdn.com'
}

export default defineConfig({
  base: baseMap[process.env.NODE_ENV],
  plugins: [react()],
});

注意: 在 vite.config.ts 中访问不到 .env 中配置的属性

4.2 替换指定 base​

替换指定 base 适用于在 Vite 项目中, 替换相应的环境变量

  1. 新增 .env、.env.development、.env.production 环境变量文件

    .env.development
    VITE_BASE_URL=/
    VITE_IMG_BASE_URL=https://my-image-cdn.com
    .env.production
    VITE_BASE_URL=https://my-cdn.com
    VITE_IMG_BASE_URL=https://my-image-cdn.com

  2. 替换 img 语法如下:

    function App() {
        return <div className="">
            <img src={new URL('./assets/img.png', import.meta.env.VITE_IMG_BASE_URL).href}/>
        </div>;
    }
    export default App;

  3. 配置 vite-env.d.ts, 增加 env 类型声明

    /// <reference types="vite/client" />


    interface ImportMetaEnv {
        readonly VITE_APP_TITLE: string;
        readonly VITE_IMG_BASE_URL: string;
    }

    interface ImportMeta {
        readonly env: ImportMetaEnv;
    }