官方推荐使用 npm create uni-app@latest 创建纯 Vite + uni-app 项目,在交互式引导中必须选择 Vite 构建工具;需配置 vite.config.ts 并保留 @dcloudio/vite-plugin-uni 插件,环境判断应使用 import.meta.env.DEV 和 UNI_MP_WEIXIN 等宏常量。

uni-app 官方从 3.9.0 开始正式支持 Vite 模式,但默认创建的项目仍是 Webpack 模式;想用 Vite,必须手动初始化并配置,不能靠 vue create 或旧版 uniapp-cli。
如何创建纯 Vite + uni-app 项目
官方推荐方式是使用 npm create uni-app@latest(注意不是 vue create),执行后会进入交互式引导,关键点是:必须在「选择构建工具」环节选 Vite(而非默认的 Webpack)。
- 选错构建工具会导致后续所有配置失效——Vite 模式下
vue.config.js、webpack.chain.js全部不生效 - 生成的项目根目录下会有
vite.config.ts,而不是vue.config.js - 运行命令变为
npm run dev:mp-weixin等,底层调用的是vite而非vue-cli-service - 如果已有 Webpack 项目,不能直接升级——需新建 Vite 项目,再迁移
src和unpackage相关逻辑
Vite 配置里哪些 uni-app 插件必须保留
Vite 模式下,@dcloudio/vite-plugin-uni 是核心,它替代了旧版的 @dcloudio/vue-cli-plugin-uni。这个插件负责处理 .vue 单文件组件里的 、条件编译、平台 API 注入等。
- 必须在
vite.config.ts的plugins数组中显式引入:uni()(来自@dcloudio/vite-plugin-uni) - 不要自行添加
@vitejs/plugin-vue——@dcloudio/vite-plugin-uni内部已集成兼容 Vue 3 的解析逻辑 - 若需 HMR 热更小程序,要确认插件版本 ≥ 3.9.0,低版本在微信开发者工具里可能不触发重载
- 自定义
resolve.alias时,避免覆盖插件内部的@/别名指向,否则import xxx from '@/xxx'可能报错
为什么 process.env.NODE_ENV 在 Vite 下不等于 development
Vite 默认用 import.meta.env.MODE,而 uni-app 的条件编译和部分 API(如 uni.getSystemInfoSync() 返回的 platform)依赖的是 __UNI_MP_PLATFORM__ 这类编译期常量,不是运行时环境变量。
-
process.env.NODE_ENV在 Vite 中始终为production(即使npm run dev:mp-weixin),这是 Vite 的行为,不是 bug - 判断开发环境请用
import.meta.env.DEV,判断平台请用__UNI_MP_WEIXIN__、__UNI_APP_PLUS__等宏常量 - 在
vite.config.ts中通过define手动注入变量时,注意字符串需加引号,例如:'__MY_FLAG__': JSON.stringify(true),否则会被当作未定义变量报错 - 第三方库若硬依赖
process.env.NODE_ENV === 'development',可能在 H5 端正常、小程序端异常,得改用import.meta.env.DEV适配
真正麻烦的是多端构建时的插件兼容性——比如你加了个 vite-plugin-svg-icons,它在 H5 正常,但在微信小程序里会因不支持动态 import() 或 DOM 操作直接白屏,这类问题不会报明确错误,只能靠真机调试逐个排除。










