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来获取环境。