@plugin-light/project-config-vite

Vite 项目基础配置

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

1. 作者

novlan1

2. 如何使用

安装

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 });
});

3. 参数

完整类型定义。

4. 常见问题

4.1. 支持的 node.js 版本

node.js 版本 >= 16

4.2. 环境变量如何注入

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

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

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

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

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

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

业务无感知，无影响。

4.5. optimizeDepsIncludes 含义是什么

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

• md5
• js-cookie
• qs
• axios

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

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

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

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

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

getViteBaseConfig({
  useCdn: false,
})

2. Promise.allSettled 报错

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

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

4.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}/`

4.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.9. 开发阶段报错503

本地开发时，如果遇到报错 503，如下图：

可以将 mkcertOptions 设为 false，即禁用掉 vite-plugin-mkcert 插件。

getViteBaseConfig({
  mkcertOptions: false,
})

4.10. console 日志去除

生产环境默认会去掉 console.log 日志和 debugger 关键字。如果想更改默认行为，可以通过覆盖 esbuild 选项实现。

export default defineConfig(({ mode }) => {
  return {
    ...getViteBaseConfig({ mode }),
    // 覆盖 esbuild 配置即可
    esbuild: {},
  }
});

5. 更新日志

点此查看