@aplus-frontend/vite-config-preset NPM

vite.config for Aplus frontend team.

NPM Version NPM Downloads NPM License

集成功能描述

构建删除debugger console
添加了预构建依赖防止开发启动是多次预构建引起的多次刷新
分包规则
注入less变量 (Vben)
集成了自定义代理能力 (支持第三方mock服务)
集成自动导入插件 (aplus端)
添加全局Config.js到index.html (Vben)
svg-icons
Qiankun
打包压缩
打包产物分析
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      |    无    |
| 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 将自动递归合并配置
```ts
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
  }
});