Skip to content

vite+vue项目打包配置

  • vite.config.js
js
import { defineConfig, loadEnv } from 'vite'
import path from 'path'

const { execSync } = require('child_process');
const dayjs = require('dayjs');

const nowTime = dayjs().format('YYYYMMDD_HHmm');
// git 当前版本号前 6 位
const GIT_HASH = execSync('git rev-parse HEAD').toString().trim().slice(0, 6);
const suffix = nowTime + '.' + GIT_HASH;
console.log(suffix, 'suffix');

export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())
  const { VITE_APP_ENV, VITE_APP_BASE_API, VITE_APP_SERVE } = env
  return {
    server: {
      proxy: {
        // https://cn.vitejs.dev/config/#server-proxy
        [VITE_APP_BASE_API + '/mock-api']: {
          target: 'https://mock.apifox.cn/', // mock 数据请求地址,自行查阅完善
          changeOrigin: true,
          rewrite: path => path.replace(RegExp(`${VITE_APP_BASE_API + '/mock-api'}`), '')
        },
        [VITE_APP_BASE_API]: { 
          target: VITE_APP_SERVE, // 真实接口地址
          changeOrigin: true,
          rewrite: path => path.replace(RegExp(`^${VITE_APP_BASE_API}`), ''),
          // 显示真实请求地址
          bypass(req, res, options) {
            const proxyURL = options.target + options.rewrite(req.url);
            console.log('proxyURL', proxyURL);
            req.headers['x-req-proxyURL'] = proxyURL; // 设置未生效
            res.setHeader('x-req-proxyURL', proxyURL); // 设置响应头可以看到
          },
        },
      }
    },
    build: {
      rollupOptions: {
        output: {
          // 自定义文件名
          chunkFileNames: `js/[name].${suffix}.js`,
          entryFileNames: `js/[name].${suffix}.js`,
          assetFileNamesL: `[ext]/[name].${suffix}.[text]`,
        },
        plugins: [
          myExample()
        ]
      }
    },
    esbuild: {
      // 打包去掉 console.log 控制台打印 和 debugger 内容,更多方式参考 https://juejin.cn/post/7249913673216639034
      drop: ["console", "debugger"],
    },
  }
})

// 自定义插件文档: https://cn.rollupjs.org/plugin-development/#outputoptions
function myExample () {
  return {
    name: 'my-example', // 此名称将出现在警告和错误中
    buildStart() {
      console.log('开始了');
    },
    buildEnd() {
      console.log('结束了');
    },
    outputOptions(outputOptions: OutputOptions) {   
      console.log(outputOptions, 'outputOptions');
    },
  };
}