项目中vite基本配置

import { ConfigEnv, defineConfig, UserConfig, loadEnv } from 'vite'
import { wrapperEnv } from './build/getEnv'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import postEnv from 'postcss-preset-env'
// 动态设置页面title
import { createHtmlPlugin } from 'vite-plugin-html'
export default defineConfig((config: ConfigEnv): UserConfig => {
  const root = process.cwd()
  const viteEnv = wrapperEnv(loadEnv(config.mode, root, 'VITE_'))
  return {
    root,
    server: {
      open: viteEnv.VITE_APP_OPEN,
      port: viteEnv.VITE_PORT,
      proxy: {
        [viteEnv.VITE_APP_BASE_API]: {
          target: viteEnv.VITE_APP_API,
          changeOrigin: true
        }
      }
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      },
      // 导入时想要省略的扩展名列表
      extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    build: {
      outDir: 'dist',
      // 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求,默认4096kb
      assetsInlineLimit: 10240
    },
    esbuild: {
      // 只要是生产环境就移除console打印
      drop: ['console', 'debugger'],
      // 环境配置了是true的话就有console.log,false就删除
      // pure:viteEnv.VITE_DROP_CONSOLE ? ['console.log','debugger'] : []
    },
    optimizeDeps: {
      // 去除依赖预构建，一般不建议；不预构建的话，会增加网络带宽和构建时间
      exclude:['lodash-es']
    },
    plugins: [
      vue(),
      // 设置页面title
      createHtmlPlugin({
        minify: true,
        entry: 'src/main.ts', // 项目入口文件
        template: 'index.html',
        inject: {
          data: {
            title: viteEnv.VITE_APP_TITLE
          }
        }
      })
    ],
    // 配置公共样式
    css: {
      preprocessorOptions: {
        scss: {
          // 全局的scss
          additionalData: `@import "@/styles/var.scss";`
        }
      },
      // 自己修改生成的hash值名称
      modules: {
        // 配置css模块化,name是文件名,local是类名,hash是hash值
        generateScopedName: '[name]_[local]_[hash:5]'
      },
      // 这样写可以热更新，写在postcss.config.cjs里面就不行，修改文件要重新编译
      postcss: {
        plugins: [
          postEnv({
            browsers: ['last 2 versions', '> 1%', 'IE 11'],
            autoprefixer: { grid: true }
          })
        ]
      }
    }
  }
})

有需要其它vite配置的话，可以查看我其他的vite文章