@aplus-frontend/vite-config-preset

Aplus vite config

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. 打包压缩
10. 打包产物分析
11. 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({
  port: 3000 
});

快捷配置参数

属性	描述	类型	默认值	环境变量
printLog	是否打印调试信息	boolean	false	无
lessVarPath	注入全局less变量的文件目录	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
subAppName	子应用名	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

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

进阶使用

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

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

export default defineApplicationConfig(
  {},
  { 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