一、配置:
1.新增四个环境文件
.env.development .env.test .env.production .env.pre
内容为不同环境的不同参数变量必须以VITE_APP开头,如:
#接口地址
VITE_APP_BASE_URL="¥¥¥¥¥¥¥"
#channel
VITE_APP_REQUEST_CHANNEL="¥¥¥¥¥¥¥"
2.修改vite.config.ts,const env … 增加define:{…}
import { defineConfig, splitVendorChunkPlugin, loadEnv } from 'vite';
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd(), '')
console.log("env", env)
return {
define: {
'process.env': {
VITE_APP_BASE_URL: env.VITE_APP_BASE_URL,
VITE_APP_REQUEST_CHANNEL: env.VITE_APP_REQUEST_CHANNEL
}
}
}
二、使用
1.在request.js中就可以直接用了
baseURL: import.meta.env.VITE_APP_BASE_URL,
2.在package.json中根据不同环境使用不同的打包命令,构建出使用不同变量的产物,请求接口的时候不同环境的接口服务器可以不同
"scripts": {
"dev": "vite",
"build": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build",
"build:test": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build --mode test",
"build:production": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build --mode production",
"preview": "vite preview",
"start": "npm run dev",
"serve:test": "vite --mode test",
"serve:production": "vite --mode production",
"pre": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build --mode pre"
构建时候不同环境使用不同命令,使用个不同环境变量 package.json
比如生产:npm run build:production
三、配置之后的报错
下载"vite":“5.0.0”
将vite从4.5.1更新到5.0.0,就不会出现关于import的报错了,
“@vitejs/plugin-legacy”: “5.0.0”,
“@vitejs/plugin-vue”: “5.0.0”,
“@vitejs/plugin-vue-jsx”: “4.0.0”,
我的项目里这几个依赖也要配合更新到这些较高的版本
这就是环境变量配置正确后import.meta.env.VITE_APP_BASE_URL编译报错的解决方法
bye~~