vite.config.js基本配置

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

import { defineConfig,loadEnv,splitVendorChunkPlugin } from 'vite';
import vue from '@vitejs/plugin-vue';
import { babel } from '@rollup/plugin-babel';
import svgLoader from 'vite-svg-loader';
import { visualizer } from 'rollup-plugin-visualizer'; //打包大小分析（stats.html）
import viteCompression from 'vite-plugin-compression'; //打包压缩

// https://vitejs.dev/config/
export default defineConfig(({command,mode})=>{
  const env = loadEnv(mode, process.cwd(), '');
  const isDev = env.NODE_ENV!=="production";
  return {
    plugins: [
      vue(),
      babel({
        babelrc: false,
        extensions: ['.ts', '.tsx'],
        plugins: [['@babel/plugin-transform-runtime', { useESModules: true }]],
        presets: [
          [
            '@babel/preset-env',
            {
              targets: ['chrome 87', 'safari 13', 'firefox 78', 'edge 88'],
              useBuiltIns: 'usage',
              bugfixes: true,
              loose: false,
              modules: false,
              corejs: createRequire(import.meta.url)('core-js/package.json').version,
              shippedProposals: true,
              ignoreBrowserslistConfig: true,
            },
          ],
        ],
        exclude: 'node_modules/**',
        babelHelpers: 'runtime',
      }),
      splitVendorChunkPlugin(),
      // VueI18nPlugin({
      //   /* options */
      //   // locale messages resource pre-compile option
      //   include: ['./src/**/lang/**/*.json', './src/**/lang/*.json'],
      // }),
      // svgLoader({
      //   svgoConfig: {
      //     plugins: [
      //       {
      //         name: 'preset-default',
      //         params: {
      //           overrides: {
      //             removeViewBox: false, // 禁用插件
      //           },
      //         },
      //       },
      //       {
      //         name: 'removeAttrs',
      //         params: {
      //           attrs: '(width|height|fill)', // 清除svg属性
      //         },
      //       },
      //     ],
      //   },
      // }),
      visualizer(),
      viteCompression(),
    ],
    //全局变量得这样写，否则会报not defined
    define: {
      __APP_ENV__: isDev?'"devlopment"':'"production"'
    },
    // 打包配置
    build: {
      outDir: 'dist', //指定输出路径
      assetsDir: 'assets', // 指定生成静态资源的存放路径
      //生产环境移除console
      minify: 'terser', // 混淆器，terser构建后文件体积更小
      terserOptions:{
        compress:{
          drop_console:!isDev,
          drop_debugger:!isDev
        }
      },
      rollupOptions: {
        output: {
          manualChunks: {
            // 打包优化
            core: ['vue', 'vue-router', 'vuex']
          },
        },
      },
    },
    server:{
      open:true, //vite项目启动时自动打开浏览器
      hmr:true, //开启热更新
      port:8090,
    },
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
        //比如图片资源都在src/assets/image目录下，不想在项目中每次都通过require("../assets/image/1.jpg")这样写一长串去引用。
        "/images":"src/assets/images/",//这里不能通过path模块解析路径的写法
      }
    }
  }
})