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

Question

I created a new Vue app ( based on Vite ) using npm init vue@latest and selected Playwright for e2e tests. The generated configuration file provides a field to set the headless mode

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

but I don't know how to set this env variable. The generated script

"test:e2e": "playwright test",

does not run in headless mode. So I tried to set this variable before running it. Scripts I tried

• "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"

Does someone know how to fix the ci script?

---

This is the generated config file

https://pastebin.com/tbXNuscy

there are many uses of process.env.CI and I'm looking for a way to set this on the fly ( inside the npm script where I need it )

Answer 1

You may add a .env file in your project folder

.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({
        // ...
    });
};

Then you can use the configs in .env like below:

in vite.config.js itself, use 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,
            },
        },
    });
};

in the other files, use import.meta.env instead

import axios from 'axios';

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

Notice :

If the config is needed on the client side, add a VITE_ prefix, or it can't be seen on the client side.

more details here

---

update:

you may use different modes for your test environment and the others

.env.test

CI=true

package.json

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

.env.prod

CI=false

package.json

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