Vite使用.env文件

Vite使用.env文件

开发中经常会使用环境变量，Vite相比于Webpack 也有一定的变化

项目目录下创建.env.development .dev.production文件

---

NODE_ENV = 'development'
VITE_APP_BASE_API = '/api' // 暴露必须以VITE开头才能被Vite识别

项目使用

import.meta.env.XXXX

if (process.env.NODE_ENV === 'development') {
  BASE_URL = `${import.meta.env.VITE_APP_BASE_API}`
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = `${import.meta.env.VITE_APP_BASE_API}`
} else {
  BASE_URL = `${import.meta.env.VITE_APP_BASE_API}`
}

Vite.config 使用

import { defineConfig, loadEnv } from 'vite'
export default ({ mode }) => {
	return defineConfig({
		server: {
			proxy: {
        		[`${loadEnv(mode, process.cwd()).VITE_APP_BASE_API}`]: {
          			target: loadEnv(mode, process.cwd()).VITE_TEST_HOST, // 线上
          			// rewrite: (path:any) => path.replace(/^\/api/, ''),
          			changeOrigin: true,
          			ws: true
        		}
      		}
		}
	})
}