vite线上和线下环境的配置

vite线上和线下环境以及测试环境的配置
第一步

在src同级目录上创建两个文件
.env.development //线下环境，不要忽略前面的点
.env.production //线上环境，不要忽略前面的点
.env.test //测试环境，不要忽略前面的点

第二步，编辑.env.development文件

MODE = 'development'
VITE_BASE_URL  = 'http://XXX' //这个是你本地环境

第三步，编辑.env.production文件

MODE = 'production'
VITE_BASE_URL = "https://XXXXXX.com/" //线上的环境地址

第四步，编辑.env.test文件

MODE = 'test'
VITE_BASE_URL = "https://XXXXXX.com/" //测试的环境地址

第五步，编辑vite.config.ts

import { defineConfig ,loadEnv} from 'vite'
export default defineConfig(({ mode }) => {
  // 获取当前环境的配置
  const config = loadEnv(mode, './')
  return {
    plugins: [vue()],
    base: './',
    server: {
      host: '0.0.0.0',
      port: 3000,
      // 反向代理
      proxy: {
        '/api': { 
          target: config.VITE_BASE_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    },
  }
})

第六步，编辑package.json

"scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build --mode production",
    "build:test": "vue-tsc && vite build --mode test"
  },

第七步，打包命令

//打包测试环境
npm run build:test
//打包正式环境
npm run build