vite-config 项目构建基础配置

简介

vite-config 基础配置，主要是对 vite 的一些配置，比如 build、server、plugins 等。
避免每个项目重复配置

默认支持以下功能:

• 支持 vue3 开发
• 支持 jsx 语法
• 旧版浏览器兼容
• 默认项目分包优化
• 代码包分析- (开关配置)
• 打包压缩- (开关配置)

快速入门

一 基础使用

import { viteConfig } from '@mid-vue/vite-config'

export default ({ mode }: ConfigEnv) => {
  //自定义的配置
  //会和默认功能合并
  const config = viteConfig({
    mode,
    plugins: [], //额外的插件
  })
  return defineConfig(config)
}

二 功能进阶

import { viteConfig, envRuntimePlugin, http2ProxyPlugin } from '@mid-vue/vite-config'
export default ({ mode }: ConfigEnv) => {
  const env = loadEnv(mode, './env')
  const config = viteConfig({
    mode,
    envDir: './env',
    plugins: [
      envRuntimePlugin(), //运行时env环境配置,支持线上环境(同一指令)
      http2ProxyPlugin(), //本地开发支持https
    ],
    server: {
      port: +env.VITE_PORT,
      proxy: {
        '/router/rest': {
          target: env.VITE_BASE_API,
          changeOrigin: true,
          ws: true,
        },
      },
    },
  })
  return defineConfig(config)
}

源码介绍

一 基础依赖

    // package.json
    "@vitejs/plugin-legacy": "^5.4.3",  //旧版本兼容
    "@vitejs/plugin-vue": "^5.2.1",  // vue3
    "@vitejs/plugin-vue-jsx": "^4.1.1",  //jsx兼容
    "rollup-plugin-visualizer": "^5.9.2",  // 代码包分析
    "vite-plugin-compression": "^0.5.1" , //打包压缩
    "vite-plugin-dts": "^4.3.0" // 自动生成.d.ts文件

二 主要配置

// vite.config.ts
 //旧版浏览器
 legacy({
      targets: ['defaults', 'not IE 11', 'Chrome 61', 'iOS >= 12', 'android >= 6'],
      polyfills: [
        'es.symbol',
        'es.array.flat',
        'web.dom-collections.for-each',
        'es.promise.finally',
        'es.string.replace-all',
        'es.promise.all-settled',
      ],
      modernPolyfills: [
        'es.promise.finally',
        'es.global-this',
        'es.string.match-all',
        'es.string.replace-all',
        'es.promise.all-settled',
      ],
    }),
   vue(),
   vueJsx(),

   // 代码包分析 - VITE_PLUGIN_ANALYZER 开关
   if (env.VITE_PLUGIN_ANALYZER === 'true') {
    plugins.push(
      visualizer({
        emitFile: false,
        filename: 'stats.html', //分析图生成的文件名
        open: true, //如果存在本地服务端口，将在打包后自动展示
      }) as Plugin,
    )
  },

   // compression 压缩 - VITE_PLUGIN_COMPRESSION 开关
  if (isProd && Boolean(env.VITE_PLUGIN_COMPRESSION === 'true')) {
    plugins.push(
      viteCompression({
        threshold: 1024,
      }),
    )
  }