vite+vue3 配置两套打包代码

需求一： 有一个接口本地调试用的代理，上线用的地址xxxx

1. 根目录下新建生产、测试、开发配置文件

2. 在请求文件中判断使用import.meta.env.VITE_USER_NODE_ENV

let api = ''
if (import.meta.env.VITE_USER_NODE_ENV === "development") {
  api = "/代理";
} else {
  api = "http://xxxxx";
}
export function quality_personal_action(params: any) {
  return request({
    url: `${api}/xxxxxxx`,
    method: 'get',
    headers: {},
    params
  })
}

需求二： 项目要发布到不同服务器，vite.config.ts配置不同

1. config里边不能用import.meta.env来判断

import { defineConfig } from 'vite'
function getConfig() {
   // 根据不同打包命令做不同配置
   let config = {
   build: {  
      // 根据 MODE 变量来配置不同的输出目录  
      outDir: process.env.npm_lifecycle_event==='build:one'? 'dist-one' : 'dist'  
    }  
    }
   if(process.env.npm_lifecycle_event==='build:one'){
      // 配置一
   }else{
      // 配置二
   }
   return defineConfig(config);
}

export default getConfig();

2. 根目录新建.env.one做其他需要的配置

3. package.json新加build:one配置

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:one": "vite build --mode one",
  },

之后使用npm run build:one打包后生成文件dist-one。npm run build命令打包后生成dist文件

如有不对，希望路过的留下评论