yarn 启动不同命令,获取不同环境

vite+react项目
// 想法是启东yarn mock时是mock数据,yarn dev连后台。最后想做一个配置文件来改变,这样打包后也可以修改是mock还是后台。
package.json

 "scripts": {
    "dev": "vite",
    "build": "vite build",
    "mock": "vite --mode mock",
    "test": "vite --mode test",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
.env
NODE_ENV="development"
.env.mock
VITE_HI = "3333"
VITE_USER_NODE_ENV="mock"
.env.test
VITE_HI = "abc"
VITE_USER_NODE_ENV = "test"
vite.config.js
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd());
  console.log('env', env)  // 不论是test还是mock VITE_USER_NODE_ENV: 'development'不变,但你VITE_HI是变得所以可以根据这个获取不同环境
  return {
    plugins: [react()],
  }
})
// 在项目中可以使用import.meta.env.MODE来获取环境。

 

posted @ 2024-02-01 15:52  Webwhl  阅读(40)  评论(0编辑  收藏  举报