uni-app如何使用Vite进行项目构建 uni-app CLI模式开发教程-uni-app-PHP中文网

uni-app项目使用vite构建需满足vue3+cli≥3.9.0，此时默认启用vite，vite.config.ts为唯一有效配置入口；须用defineuniappconfig包裹插件，环境变量须以uni_app_或vue_app_开头，平台判断用__uni_mp_weixin__等宏常量。

uni-app如何使用vite进行项目构建 uni-app cli模式开发教程

uni-app 项目用 Vite 构建，不是「要不要切」的问题，而是「你用的是不是 Vue3 + CLI ≥ 3.9.0」——满足这两个条件，项目默认就是 Vite，vite.config.ts 是唯一有效的配置入口，vue.config.js 完全不生效。

怎么确认你的项目真是 Vite 模式

别看 package.json 里有没有 dev:mp-weixin 这类脚本，关键看三件事：

执行 npx uni-app -V，输出版本号 ≥ 3.9.0；低于就升级：npm install -g @dcloudio/vue-cli
项目根目录存在 vite.config.ts（或 vite.config.js），且没有 vue.config.js 或 webpack.config.js
运行 npm run dev:h5 时终端第一行显示的是 vite vX.X.X dev server，不是 vue-cli-service

如果看到 vue.config.js 还在项目里，直接删掉——它不会报错，但会误导你改错地方。

vite.config.ts 必须调用 defineUniAppConfig

很多人照着 Vite 官方文档写 defineConfig({ plugins: [...] })，结果 H5 端路由白屏、uni.getSystemInfoSync() 返回空对象。问题出在插件链缺失。

VitePress Generator

使用 VitePress 快速生成静态网站，支持安装依赖、初始化项目、本地预览、构建和部署。

下载

@dcloudio/vite-plugin-uni 不是可选插件，它是 uni-app 在 Vite 下的运行时核心，负责解析 <template lang="wxml"></template>、注入平台 API、处理 __UNI_MP_WEIXIN__ 这类宏常量。

正确写法必须包裹 defineUniAppConfig()：

import { defineConfig } from 'vite'
import { defineUniAppConfig } from '@dcloudio/vite-plugin-uni'

export default defineConfig({
  plugins: [defineUniAppConfig()],
  resolve: {
    alias: { '@': '/src' }
  }
})

漏掉 defineUniAppConfig()，小程序端可能暂时正常，但 H5 端 pages.json 不加载、条件编译失效
不要手动加 @vitejs/plugin-vue —— @dcloudio/vite-plugin-uni 内部已集成 Vue 3 支持

环境变量为什么 import.meta.env 读不到

process.env.NODE_ENV 在 Vite 下恒为 "production"，这不是 bug，是 Vite 的设计。uni-app 的条件判断必须用编译期宏或 import.meta.env 的特定前缀。

平台判断一律用宏：__UNI_MP_WEIXIN__、__UNI_APP_PLUS__，它们在编译时被静态替换，不是运行时变量
自定义环境变量必须以 UNI_APP_ 或 VUE_APP_ 开头，比如 .env.development 里写 UNI_APP_API_BASE=https://dev.api.com，才能通过 import.meta.env.UNI_APP_API_BASE 访问
第三方库若硬依赖 process.env.NODE_ENV === 'development'，需手动 patch 或改用 import.meta.env.DEV
在 vite.config.ts 中用 define 注入变量时，字符串值必须 JSON.stringify()，例如：'__MY_FLAG__': JSON.stringify(true)，否则会被当未定义变量报错

老项目无法“升级”到 Vite，只能重建

Vue2 项目、或 CLI

新建命令必须用 npx create-un-app@latest（注意不是 vue create），并在交互中明确选 Vite + Vue3
或者用模板克隆：npx degit dcloudio/uni-preset-vue#vite-ts my-project
迁移时只搬 src/、unpackage/、pages.json、manifest.json 等业务相关文件，vite.config.ts 要重写，不能复用旧配置
特别注意：HBuilderX 正式版不支持创建 Vue3 项目，如需 GUI 支持，得用 Alpha 版或纯 CLI