@plugin-light/project-config-vite NPM

Vite 项目基础配置

封装 vite.config.ts 的基本配置，开箱即用。

1. 如何使用

安装

pnpm add @plugin-light/project-config-vite -D

在 vite.config.ts 中添加如下设置：

import { getViteBaseConfig } from "@plugin-light/project-config-vite";

import { defineConfig } from "vite";

export default defineConfig(({ mode }) => {
  return getViteBaseConfig({ mode });
});

2. 参数

完整类型定义。

属性	类型	说明	默认值
mode	`string`	模式，对应 Vite 中 `defineConfig` 的 `mode` 参数	-
serverPort	`number`	本地开发端口（不传会取 `process.env.VUE_APP_PORT`，或 `443`）	-
serverHttps	`Server`	本地开发是否是 `https`	-
serverHost	`string` \| `boolean`	传给 `server.host`（参考 Vite 文档）	-
optimizeDepsIncludes	`Array<string>`	对应 `optimizeDeps.include`	-
optimizeDepsExcludes	`Array<string>`	对应 `optimizeDeps.exclude`	-
addCodeAtEndOptions	`IAddCodeAtEndOptions` \| `boolean`	`add-code-at-end` 插件参数	-
pressUiAlias	`string`	`press-ui` 本地的 `alias` 配置	`src/library/press-ui`
pressPlusAlias	`string`	`press-plus` 本地的 `alias` 配置	`src/library/press-plus`
aliasForLibraryOptions	`IAliasForLibraryOptions`	`alias-for-library` 插件参数	-
pmdAliasMap	`Record<string, string>`	`pmd-tools` 之类的别名映射	-
customElements	`Array<string>`	自定义元素配置	-
useCdn	`boolean`	三方库是否使用 `cdn` 链接（比如 `vue`，`vue-router`）	`false`
useElementPlusCDN	`boolean`	是否使用 `element-plus` 的 `cdn`	`false`
mkcertOptions	`boolean` \| `MkcertPluginOptions`	`vite-plugin-mkcert` 参数	-
prePlugins	`Array<Plugin>`	前置插件	-
postPlugins	`Array<Plugin>`	后置插件	-
autoImportVant	`boolean` \| `VantResolverOptions`	是否自动导入 `vant`	`true`
autoImportElementPlus	`boolean` \| `ElementPlusResolverOptions`	是否自动导入 `element-plus`	`true`
autoImportTDesign	`boolean` \| `TDesignResolverOptions`	是否自动导入 `tdesign`	`{ library: 'vue-next' }`

3. 常见问题

3.1. 支持的 `node.js` 版本

node.js 版本 >= 16

3.2. 环境变量如何注入

支持在环境变量文件中配置 VUE_APP_DIR，环境变量文件可以是 .env, .env.local 等

也支持不配置，此时应用入口是 src/main.ts，即非 monorepo 模式

3.3. 如何进行打包产物分析

当 process.env.VITE_VISUALIZER 不为 falsy 时，本工具会使用 rollup-plugin-visualizer 插件，开发者可用来进行打包分析。

3.4. 如何兼容的 Vue 默认导出

内部使用了 vite-plugin-export-default-in-vue，来兼容 Vue2.x 时期的默认导入 Vue 对象。

业务无感知，无影响。

3.5. optimizeDepsIncludes 含义是什么

对应 optimizeDeps.include，业务中常用到的有：

md5
js-cookie
qs
axios

3.6. Vite 升级之后可能会出现的问题

Vie 被曝出有安全漏洞，需升级到 6.2.3+。

升级之后可能对前端项目有几个影响。

press-ui 中某些变量无法识别

解决办法为，设置 useCdn 为 false。

getViteBaseConfig({
  useCdn: false,
})

Promise.allSettled 报错

这是因为 Vite 使用了较高级的语法，某些低版本浏览器不支持。

解决办法为，手动 polyfill。或升级 Vite 最新版本。

3.7. 业务中获取分支名等变量

流水线会注入以下环境变量：

# 分支
VITE_PUBLISH_BRANCH

# 发布人
VITE_PUBLISH_AUTHOR

业务可以参考下面的方式获取：

const CUR_BRANCH = (import.meta.env.VITE_PUBLISH_BRANCH || 'develop').replace(/\//, '.');

const shareUrl = `https://foo/bar.${CUR_BRANCH}/`

3.8. windows 编译慢的问题

可以给 getViteBaseConfig 传递以下参数，禁用掉一些三方库的 alias 逻辑。

getViteBaseConfig({
  aliasForLibraryOptions: {},
  pressPlusAlias: '',
  pressUiAlias: '',
  pmdAliasMap: {},

  // 按需添加
  optimizeDepsIncludes: ['md5', 'js-cookie'],
})

注意：

需安装最新版本的 press-ui、@plugin-light/project-config-vite 等底层库
vite 版本需 >=6.3.1+
三方库的 javascript 文件需自行处理条件编译等语法

效果对比，之前：

之后：

原理：

Vite 最新版本会编译三方库的非 javascript 文件，所以不再需要 alias 逻辑，javascript 文件需自行处理。

4. 更新日志

点此查看