mx52jing

Appearance

Return to top
On this page

区分不同环境

根据启动命令

先看下项目运行时会有哪些参数

package.json的scripts中的命令

json
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

vite.config.js文件内容

javascript
import { defineConfig } from "vite";

const config = defineConfig((...args) => {
    console.log(...args)
    return {};
})

export default config;
  • 运行pnpm dev，打印如下
shell
{ mode: 'development', command: 'serve', ssrBuild: false }
  • 运行pnpm build，打印如下
shell
{ mode: 'production', command: 'build', ssrBuild: false }

  • 可以看到，开发环境和生产环境mode和command都是不同的

  • 如果只有开发和生产环境，可以通过读取command来获取不同的配置

  • 可以和webpack一样，创建不同的配置文件，vite.base.config.js、vite.dev.config.js、vite.prod.config.js，然后根据不同的环境启用不同的配置

vite.config.js(伪代码)

javascript
import { defineConfig } from "vite";
import viteBaseConfig from './vite.base.config'
import viteDevConfig from './vite.dev.config'
import viteProdConfig from './vite.prod.config'

const configMap = {
  'serve': () => {
    console.log('serve配置')
    return {
      ...viteBaseConfig,
      ...viteDevConfig
    }
  },
  'build': () => {
    console.log('build配置')
    return {
      ...viteBaseConfig,
      ...viteProdConfig
    }
  }
}

export default defineConfig(({ command }) => {
  /**
   * command： 'build' | 'serve'
   * 执行vite直接启动 command就是'serve'
   * 执行vite build command就是'build'
   */
  console.log('command', command);
  return configMap[command]();
})

根据环境变量

vite中对环境变量的处理

TIP

  • 要想让vite读取到环境变量，变量必须以VITE开头，这个规则可以通过envPrefix配置来更改

在vite.config.js中获取环境变量

  • 官方文档介绍

  • 使用dotenv(vite中内置了dotenv这个方法)读取.env配置文件，将读取到的环境变量注入到process.env中，具体过程如下：

    • 调用loadEnv方法，找到.env文件，解析其中环境变量，并放到一个对象中

    • 拼接传进来的mode变量，根据传入的参数寻找.env.${mode}文件，解析其中环境变量，并放到一个对象中

示例

  • 在项目根目录下添加.env、.env.development、.env.production文件

  • 修改vite.config.js

javascript
import { defineConfig, loadEnv } from "vite";

const config = defineConfig(({ command, mode }) => {
  const envConfig = loadEnv(mode, process.cwd())
  console.log(`
        command => ${command},
        mode => ${mode},
        envConfig => ${JSON.stringify(envConfig)}
    `)
  return {};
})

export default config;
  • 使用pnpm dev启动项目，打印如下
shell
  command => serve,
  mode => development,
  envConfig => {"VITE_APP_KEY":"dev"}
  • 使用pnpm build打包项目，打印如下
shell
  command => build,
  mode => production,
  envConfig => {"VITE_APP_KEY":"prod"}

在业务代码中获取环境变量

  • 不需要手动调用loadEnv函数读取，使用vite内置的方法，可以只配置.env、.env.${mode}文件，其他交给vite来处理

  • 如果想在自己客户端业务代码中获取读到的环境变量，可从import.meta.env获取

  • import.meta.env是一个对象，开发环境下内容如下

javascript
{
  BASE_URL: "/"
  DEV: true
  MODE: "development"
  PROD: false
  SSR: false
  VITE_APP_KEY: "dev"
}

环境变量相关配置

官网相关内容

  • envDir，类型string，指定环境变量文件所在的文件夹名称，默认root配置指定的路径

  • envPrefix，类型string | string[]，指定环境变量前缀，默认VITE_

WARNING

  • 不要将envPrefix设置为''，这是不安全的
javascript
import { defineConfig } from "vite";

export default defineConfig({
  // envDir: '', // 指定环境变量文件所在的文件夹名称，默认root配置，指定的路径
  // envPrefix: 'VITE' // 指定环境变量前缀，默认VITE
})

添加其他环境

  • 如果想添加一个测试环境test配置，可以通过修改运行时参数，修改package.json的scripts
json
  "scripts": {
    "dev": "vite",
    "dev:test": "vite --mode test",
    "build": "vite build",
    "build:test": "vite build --mode test",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  • 运行pnpm dev:test
shell
{ mode: 'test', command: 'serve', ssrBuild: false }
  • 运行pnpm build:test
shell
{ mode: 'test', command: 'build', ssrBuild: false }

其他

相关代码可查看environment