uni-app vue3 hbuild创建的项目，如何使用 npm run build 进行发行打包，而不使用hbuild的发行功能

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app vue3 hbuild创建的项目，如何使用 npm run build 进行发行打包，而不使用hbuild的发行功能

Harmonyos Next教程
1 回复

在使用 uni-app 和 Vue 3 开发项目时，如果你希望通过命令行工具而非 HBuilderX 的发行功能来进行打包，你可以使用 npm 脚本进行构建。以下是一个详细的步骤和代码案例，展示如何使用 npm run build 命令进行发行打包。

步骤一：确保项目结构正确

首先，确保你的项目已经使用 Vue 3 和 uni-app 初始化，并且项目根目录下包含 package.json 文件。

步骤二：配置 package.json

打开 package.json 文件，确保其中包含了构建脚本。通常，uni-app 项目在 package.json 中会包含类似以下的脚本：

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development uni-app-cli serve",
    "build": "cross-env NODE_ENV=production uni-app-cli build",
    "info": "node node_modules/@dcloudio/uni-cli-shared/cli/info.js"
  }
}

这里我们关注的是 build 脚本，它使用了 uni-app-cli build 命令进行生产环境的构建。

步骤三：安装依赖

确保你已经安装了所有必要的依赖。在项目根目录下运行：

npm install

步骤四：构建项目

一旦所有依赖安装完毕，你可以通过运行以下命令来构建项目：

npm run build

这条命令会触发 package.json 中定义的 build 脚本，使用 uni-app-cli 工具进行生产环境的打包。

步骤五：检查输出

构建完成后，你可以在项目的 dist 或 unpackage（取决于你的配置）目录下找到打包好的文件。这些文件通常包括 HTML、CSS、JavaScript 以及资源文件，可以直接部署到你的服务器上或通过 CDN 进行分发。

示例：完整构建流程

假设你的项目结构如下：

my-uni-app/
├── node_modules/
├── public/
├── src/
├── package.json
├── uni.project.json
└── ...

在 my-uni-app 目录下打开终端，运行：

npm install
npm run build

构建成功后，你可以在 dist 或 unpackage/dist/build/app-plus（具体路径可能因配置而异）目录下找到打包好的文件。

通过上述步骤，你就可以在不使用 HBuilderX 发行功能的情况下，使用命令行工具进行 uni-app 项目的打包发行。

回到顶部