跳到主要内容

2. 安装这个插件并运行

安装插件

在项目目录下,执行:

npm i -D weapp-tailwindcss weapp-vite

这样 weapp-tailwindcssweapp-vite 就被安装在你的本地了

执行初始化命令

在命令行中运行

npx weapp-vite init

对现有的原生小程序项目,进行 weapp-vite 的初始化

执行后,会发现主要有许多文件改动,CLI 主要做了 3 件事情:

  • 创建 vite.config.ts 文件,这个是 weapp-vitevite 的配置文件
  • 修改 package.json, 添加 devbuild 开发和构建脚本,还有构建 npm 和打开微信开发者工具
  • 修改 project.config.json 内容,来适配构建产物
  • 添加适配 vite 的 dtstsconfig.json

注册插件

package.json 添加下列脚本:

package.json
{
"scripts": {
"postinstall": "weapp-tw patch"
}
}

然后在你的 vite.config.ts 里对插件进行注册:

vite.config.ts
import { defineConfig } from 'weapp-vite/config'
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from 'weapp-tailwindcss/vite'

export default defineConfig({
plugins: [
uvwt({
rem2rpx: true,
}),
],
})

开始运行

使用 npm run dev 进入开发模式, 此模式带有热更新的,主要用于开发

使用 npm run build 进行构建

不论是 npm run dev 还是 npm run build, 他们的构建产物,都在工程目录下的 dist 目录

使用微信开发者工具,直接导入工程目录,然后即可预览效果!

注意不是导入 dist 目录,是你工程的根目录! 通常是 dist 的父级目录,不要搞错了!

配置好的模板

假如你配置不成功,你可以参考以下模板进行配置文件对比:

vite-native

想了解更多 weapp-vite

更多场景和配置,请查看 weapp-vite 文档网站