如何在 npm 脚本中设置 process.env 变量？

我使用以下命令创建了一个新的 Vue 应用程序（基于 Vite ）npm init vue@latest并选择 Playwright 进行 e2e 测试。生成的配置文件提供了一个字段来设置无头模式

const config: PlaywrightTestConfig = {
  // ...
  use: {
    // ...
    headless: !!process.env.CI,
  },
  // ...
};

但我不知道如何设置这个环境变量。生成的脚本

"test:e2e": "playwright test",

不在无头模式下运行。所以我尝试在运行之前设置这个变量。我尝试过的脚本

• "test:e2e:ci": "NODE_ENV=CI playwright test"
• "test:e2e:ci": "set NODE_ENV=CI& playwright test"
• "test:e2e:ci": "set NODE_ENV=CI & playwright test"
• "test:e2e:ci": "set CI=true & playwright test"
• "test:e2e:ci": "set NODE_ENV=CI && playwright test"
• "test:e2e:ci": "set CI=true && playwright test"

有人知道如何修复 ci 脚本吗？

这是生成的配置文件

https://pastebin.com/tbXNuscy https://pastebin.com/tbXNuscy

有很多用途process.env.CI我正在寻找一种方法来动态设置它（在我需要它的 npm 脚本中）

您可以添加一个.env文件在你的项目文件夹中

.env

NODE_ENV=CI

vite.config.js

import { defineConfig, loadEnv } from 'vite';

export default ({ mode }) => {

    process.env = {
        ...process.env,
        ...loadEnv(mode, process.cwd())
    };

    return defineConfig({
        // ...
    });
};

然后你可以使用配置.env像下面这样：

in vite.config.js本身，使用process.env

import { defineConfig, loadEnv } from 'vite';

export default ({ mode }) => {

    process.env = {
        ...process.env,
        ...loadEnv(mode, process.cwd())
    };

    return defineConfig({
        server: {
            hmr: {
                // you may use process.env here
                host: process.env.VITE_APP_HOST,
            },
        },
    });
};

在其他文件中，使用import.meta.env instead

import axios from 'axios';

axios.defaults.baseURL = import.meta.env.VITE_API_BASE;

Notice:

如果客户端需要配置，则添加VITE_前缀，否则客户端看不到。

更多详细信息请点击此处 https://vitejs.dev/guide/env-and-mode.html#env-files

update:

你可以使用不同的modes https://vitejs.dev/guide/env-and-mode.html#modes对于您的测试环境和其他环境

.env.test

CI=true

包.json

"test:e2e": "playwright test --mode=test",

.env.prod

CI=false

包.json

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