vite配置环境变量和使用，配置正确后import.meta.env.VITE_APP_BASE_URL编译报错的解决方法

一、配置：
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~~