使用 Vite 编译微信小程序

该插件使用 Vite 对原生微信小程序编译

安装插件

请确保你已安装 vite 7

如果还没有安装，请执行：npm install -D vite

1npm install -D @dafengzhen/vite-plugin-mp

使用插件

• 配置插件

1import VitePluginMp from '@dafengzhen/vite-plugin-mp';
2import { defineConfig } from 'vite';
3
4export default defineConfig({
5  plugins: [VitePluginMp()],
6});

• 编译打包

1npm run build

• 输入输出

1# 输入
2miniprogram
3├── app.json
4├── app.ts
5├── app.wxss
6├── pages
7│   ├── index
8│   │   ├── index.json
9│   │   ├── index.ts
10│   │   ├── index.wxml
11│   │   └── index.wxss
12│   └── logs
13│       ├── logs.json
14│       ├── logs.ts
15│       ├── logs.wxml
16│       └── logs.wxss
17└── utils
18    └── util.ts
19project.config.json
20project.private.config.json

1# 输出
2dist
3├── miniprogram
4│    ├── app.js
5│    ├── app.json
6│    ├── app.wxss
7│    ├── pages
8│    │   ├── index
9│    │   │   ├── index.js
10│    │   │   ├── index.json
11│    │   │   ├── index.wxml
12│    │   │   └── index.wxss
13│    │   └── logs
14│    │       ├── logs.js
15│    │       ├── logs.json
16│    │       ├── logs.wxml
17│    │       └── logs.wxss
18│    └── utils
19│        └── util.js
20└── project.config.json

插件选项

compress?: (html: string | Uint8Array) => Promise<string | Uint8Array> | string | Uint8Array

自定义函数，用于压缩 HTML 字符串或 Uint8Array 输入

• 参数：
  • html：待压缩的内容，可以是字符串或 Uint8Array
• 返回值：
  • 返回压缩后的内容，可以是同步或异步的 string 或 Uint8Array

配置示例：

1import { minify } from 'html-minifier-terser';
2
3compress: (source) => {
4  return minify(source as string, {
5    caseSensitive: true,
6    collapseBooleanAttributes: true,
7    collapseWhitespace: true,
8    conservativeCollapse: true,
9    ignoreCustomFragments: [/\{\{[\s\S]*?}}/],
10    keepClosingSlash: true,
11    removeComments: true,
12    removeEmptyAttributes: true,
13    removeOptionalTags: true,
14    removeRedundantAttributes: true,
15    sortAttributes: true,
16    sortClassName: true,
17  });
18}

debug?: boolean

是否启用详细日志输出，仅有被复制匹配的文件才有日志输出

• 默认值：false

isTsProject?: boolean

是否为 TypeScript 项目

• 默认值：true

jsonIgnore?: string | string[]

指定要排除处理的 JSON 文件或目录的 glob 匹配模式

jsonInclude?: string | string[]

指定要包含处理的 JSON 文件或目录的 glob 匹配模式

配置示例：

1jsonInclude: ['project.private.config.json']

outputDir?: string

输出目录，相对于项目根目录

• 默认值："miniprogram"

rootDir?: string

用于解析文件路径的根目录

• 默认值："miniprogram"

targets?: { src: string; dest: string; }[]

要复制的目标列表

每个对象代表一个复制规则：

• src: 相对于 rootDir 的源文件 glob 匹配模式
• dest: 相对于 outputDir 的目标目录，匹配的文件将被复制到此目录中

配置示例：

1targets: [
2  {
3    dest: 'assets',
4    src: 'assets/**/*.txt',
5  },
6]

rpxToVw?: boolean

是否启用将 rpx 自动转换为 vw 的功能

仅对 wxss 样式文件有效

• 默认值：false

designWidth?: number

设计稿的宽度，通常用于将 rpx 单位转换为 vw 单位时的基准宽度

例如，在 750 的设计稿下，1rpx = 0.133vw（100 / 750）

• 默认值：750

其他问题

• 适用场景

  原生微信小程序

• 插件版本

  基于 vite 7 编写

• 使用示例

  参考 examples 下的 miniprogram，使用的是微信小程序 ts 基础模版

• 运行项目

  构建完成，会生成 dist 目录，打开微信小程序开发者工具，选择 dist 目录导入

• 目录结构

  一个小程序页面由四个文件组成，分别是：

  文件类型	必需	作用
  js	是	页面逻辑
  wxml	是	页面结构
  json	否	页面配置
  wxss	否	页面样式表

  描述页面的四个文件应该具有相同的路径与文件名

License

MIT