Plugin Light

Appearance

Vite 项目基础配置 ​

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

1. 如何使用 ​

安装

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

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

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

import { defineConfig } from "vite";

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

2. 参数 ​

完整类型定义。

属性类型说明默认值
modestring模式，对应 Vite 中 defineConfig 的 mode 参数-
serverPortnumber本地开发端口（不传会取 process.env.VUE_APP_PORT，或 443）-
serverHttpsServer本地开发是否是 https-
serverHoststring | boolean传给 server.host（参考 Vite 文档）-
optimizeDepsIncludesArray<string>对应 optimizeDeps.include-
optimizeDepsExcludesArray<string>对应 optimizeDeps.exclude-
addCodeAtEndOptionsIAddCodeAtEndOptions | booleanadd-code-at-end 插件参数-
pressUiAliasstringpress-ui 本地的 alias 配置src/library/press-ui
pressPlusAliasstringpress-plus 本地的 alias 配置src/library/press-plus
aliasForLibraryOptionsIAliasForLibraryOptionsalias-for-library 插件参数-
pmdAliasMapRecord<string, string>pmd-tools 之类的别名映射-
customElementsArray<string>自定义元素配置-
useCdnboolean三方库是否使用 cdn 链接（比如 vue，vue-router）false
useElementPlusCDNboolean是否使用 element-plus 的 cdnfalse
mkcertOptionsboolean | MkcertPluginOptionsvite-plugin-mkcert 参数-
prePluginsArray<Plugin>前置插件-
postPluginsArray<Plugin>后置插件-
autoImportVantboolean | VantResolverOptions是否自动导入 vanttrue
autoImportElementPlusboolean | ElementPlusResolverOptions是否自动导入 element-plustrue
autoImportTDesignboolean | 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+。

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

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

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

ts
getViteBaseConfig({
  useCdn: false,
})
  1. Promise.allSettled 报错

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

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

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

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

bash
# 分支
VITE_PUBLISH_BRANCH

# 发布人
VITE_PUBLISH_AUTHOR

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

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

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

3.8. windows 编译慢的问题 ​

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

js
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. 更新日志 ​

点此查看