uniapp-cli-vite如何使用和配置

"最近开始用uniapp-cli-vite开发项目，但在配置过程中遇到一些问题：

  1. 如何正确初始化一个uniapp-cli-vite项目？官方文档提到的命令执行后总报错
  2. vite.config.js里需要特殊配置吗？和普通vite项目有什么区别？
  3. 开发时热更新特别慢，是配置问题还是插件冲突？
  4. 生产打包时如何优化分包策略？
    有没有实际项目经验的小伙伴分享下完整配置模板和避坑指南？"
2 回复

uniapp-cli-vite 使用步骤：

  1. 安装：npm install -g @dcloudio/uni-cli-vite
  2. 创建项目：npx degit dcloudio/uni-preset-vite#项目名 项目名
  3. 运行：npm run dev:%PLATFORM%（如 dev:h5）

配置 vite.config.js：

  • 修改端口、代理等
  • 支持 Vue3 组合式 API
  • 注意兼容小程序生命周期

UniApp CLI Vite 是基于 Vite 构建工具的 UniApp 开发模式，提供更快的冷启动和热更新。以下是使用和配置步骤：

1. 环境准备

  • 确保 Node.js 版本 ≥ 16.0。
  • 全局安装 @vue/cli（如已安装可跳过）：
    npm install -g [@vue](/user/vue)/cli

2. 创建项目

使用官方模板创建支持 Vite 的 UniApp 项目：

npx degit dcloudio/uni-preset-vue#vite my-vite-project

或通过 HBuilderX 创建时选择 Vite 模板。

3. 安装依赖

进入项目目录并安装依赖：

cd my-vite-project
npm install

4. 运行项目

  • 开发环境：
    npm run dev:%PLATFORM%
    例如 npm run dev:h5 启动 H5 平台，npm run dev:mp-weixin 启动微信小程序。
  • 生产构建：
    npm run build:%PLATFORM%

5. 关键配置

项目根目录的 vite.config.js 是核心配置文件，常用选项：

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";

export default defineConfig({
  plugins: [uni()],
  // 配置路径别名
  resolve: {
    alias: {
      "@": "/src",
    },
  },
  // 配置开发服务器
  server: {
    host: "0.0.0.0",
    port: 3000,
  },
  // 自定义 CSS 预处理器
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/styles/variables.scss";',
      },
    },
  },
});

6. 平台特定配置

在 src 目录下通过 platforms/ 子目录区分平台代码（如 platforms/h5），编译时自动合并。

7. 注意事项

  • 插件兼容性：部分 UniApp 插件可能需检查 Vite 兼容性。
  • 静态资源：使用绝对路径（如 /static/logo.png）或导入方式。
  • 环境变量：通过 .env 文件配置，以 VITE_ 开头（如 VITE_API_BASE）。

总结

UniApp CLI Vite 显著提升开发效率。重点关注 vite.config.js 配置，并根据平台调整代码结构。遇到问题时参考 UniApp Vite 文档。

回到顶部