Vite|Vite使用.env文件 javascript|typescript|vue.js

Vite使用.env文件

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

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

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

项目使用

【Vite|Vite使用.env文件】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 } } } }) }