vite.config for Aplus frontend team.

集成功能描述

1. 构建删除debugger console
2. 添加了预构建依赖 防止开发启动是多次预构建引起的多次刷新
3. 分包规则
4. 注入less变量 (Vben)
5. 集成了自定义代理能力 (支持第三方mock服务)
6. 集成自动导入插件 (aplus端)
7. 添加全局Config.js到index.html (Vben)
8. svg-icons
9. Qiankun
10. 打包压缩
11. 打包产物分析
12. css添加前缀

安装

pnpm add @aplus-frontend/vite-config-preset -w

添加 环境变量

• .env.dev

VITE_PUBLIC_PATH = /subapp-path     #修改 
VITE_PUBLIC_PATH_ONLINE = /subapp-path    #若有可删除

本地开发环境配置放在此文件中,不会与团队其他成员共享

• .env.development.local

VITE_DEV_SERVER = http://api.dev.elnkpro.com
# mock server url
VITE_APIFOX_MOCK_SERVER = http://127.0.0.1:4523/~~~
# 需要mock的服务网关
VITE_MOCK_MODULE = oms

配置 package.json

"dev:mock": "cross-env USE_MOCK=true pnpm vite "

Vite.config.ts使用

基础使用

第一个参数为快捷参数配置,提供了简单的扁平化配置能力,可以自定义开发服务端口,主题色,less变量,打印日志时可传入相关配置

import { defineApplicationConfig } from '@aplus-frontend/vite-config-preset';

export default defineApplicationConfig({
  primaryColor: '#34B77C',  // aplus端不能设置primaryColor
  port: 3000 
});

快捷配置参数

| 属性 | 描述 | 类型 | 默认值 | 环境变量 | | ------------ | ---------------------------- | ----------- | ------- | ------- | | printLog | 是否打印调试信息 | boolean | false | 无 | | lessVarPath | 注入全局less变量的文件目录 | string | '' | 无 | | primaryColor | 主色 | string | '' | 无 | | autoImportComp | 是否自动导入 AntDesignVue | boolean | false | 无 | | port | 开发服务端口 | number | 4000 | 无 | | openVueDevtool | 开启vue调试器 | boolean | false | 无 | | esbuildDrop | 打包时需要丢弃的 | 'debugger'\|'console'[]| ['debugger','console'] | 无 | | publicPath | 开发或生产环境服务的公共基础路径 | sting | / | VITE_PUBLIC_PATH | | buildCompress | 打包构建时压缩方式 | gzip\|brotli\|none| gzip | VITE_BUILD_COMPRESS | | enableAnalyze | 是否启用构建产物分析 | boolean | false | VITE_ENABLE_ANALYZE | | qiankunSubAppName| qiankun子应用名,为空不会使用qiankun插件 | string | | VITE_GLOB_SUBAPP_TITLE | | useMock | 是否启用apiFox Mock代理 | `boolean` | `false` | USE_MOCK | | apiUrlPrefix | 开发环境url请求前缀 | `string` | `/api` | VITE_GLOB_API_URL_PREFIX | | apiServer | 开发环境后端服务 | `string` | | VITE_DEV_SERVER | | mockServerMap | mock服务模块服务映射表 | [string\|Regex,string][] | `` | VITE_MOCK_MODULE |

属性若有设置相应环境不变量,环境变量优先生效

注意: 由于项目原因 aplus端 设置primaryColor 会报错

进阶使用

可以使用第二个参数配置覆盖选项,结构和Vite原生配置完全相同,vite-config 将自动递归合并配置

import { defineApplicationConfig } from '@aplus-frontend/vite-config-preset';
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineApplicationConfig(
  { primaryColor: '#34B77C'},
  { build: {
    target: 'es2020',
    cssTarget: 'chrome80',
    minify: 'esbuild',
    reportCompressedSize: false,
    chunkSizeWarningLimit: 1024,
    rollupOptions: {
      maxParallelFileOps: 3
    }
  },
  plugins: [ vueDevTools()]
  }
);
以上配置会覆盖内置的配置

如果需要根据command或mode动态配置可传入一个方法,返回覆盖配置

import { defineApplicationConfig } from '@aplus-frontend/vite-config-preset';

export default defineApplicationConfig({},(command,mode)=>{
  let plugins = []
  if(mode=='development'&&command!='build'){
    plugins.push( vueDevTools())
  }
  return { build: {
      target: 'es2020',
      cssTarget: 'chrome80',
      minify: 'esbuild',
      reportCompressedSize: false,
      chunkSizeWarningLimit: 1024,
      rollupOptions: {
        maxParallelFileOps: 3
      }
    },
    plugins
  }
});

Usage

• 本地开发: pnpm dev
• 本地开发+mock: pnpm dev:mock