011Vite打包与开发态的常用配置vite.config.ts

Vite指定配置文件vite --config my-config.js

建立配置文件.env.development/.env.production

• 用来储存一些项目常量

# 本地开发环境变量
NODE_ENV=development
APP_HTTP_URL=127.0.0.1
APP_HTTP_PORT=909
APP_DIST_DIR=../../web-client-dist/ui/

# 接口地址
APP_API_HTTP=http://127.0.0.1:9098

vite.config.ts配置文件及详细说明如下：

import { fileURLToPath, URL } from 'node:url';

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';

// 官方文档：https://cn.vitejs.dev/config/
export default defineConfig(({ command, mode, ssrBuild }) => {
  console.log(666.701, command, mode, ssrBuild);
  // 可以根据不同环境自定义配置
  const IS_PROD = mode === 'production';
  const { APP_HTTP_URL, APP_HTTP_PORT, APP_API_HTTP, APP_DIST_DIR } = loadEnv(
    mode,
    process.cwd(),
    ''
  );
  console.log(666.702, APP_HTTP_URL, APP_HTTP_PORT, APP_API_HTTP, APP_DIST_DIR);

  return {
    plugins: [vue()],
    // 配置别名，注意：需要在tsconfig配置中同步
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
    // 开发者相关的服务配置
    server: {
      host: APP_HTTP_URL, //调试网址
      port: Number(APP_HTTP_PORT), // 调试端口
      open: true, // 是否在运行时自动打开浏览器
      cros: true, //跨域设置
      // 代理配置
      proxy: {
        '^/api': {
          target: APP_API_HTTP,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
    // 编译配置
    esbuild: {
      // 生产环境删除 console、debugger 语句
      drop: IS_PROD ? ['debugger', 'console'] : [],
    },
    // 打包构建时的配置
    build: {
      sourcemap: !IS_PROD, // 非生产环境生成 sourcemap
      outDir: APP_DIST_DIR,
      // assetsDir: APP_DIST_DIR+'static/img/', // 指定生成静态资源的存放路径
      // Rollup 打包配置
      rollupOptions: {
        // external: ['vue', 'element-plus'], // 确保外部化处理那些你不想打包进库的依赖
        // output: {
        //   globals: {
        //     vue: 'Vue', // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        //     'element-plus': 'elementPlus',
        //   },
        // },
        brotliSize: false, // 不统计
        target: 'esnext',
        minify: 'esbuild', // 混淆器，terser构建后文件体积更小
        plugins: [
          // visualizer({ open: true, gzipSize: true })
        ],
      },
      chunkSizeWarningLimit: 2000,
      cssCodeSplit: true, //css 拆分
      assetsInlineLimit: 5000, //小于该值 图片将打包成Base64
      minify: false, //是否禁用最小化混淆，esbuild打包速度最快，'terser'打包体积最小。
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true,
        },
      },
    },
  };
});