uni-app 项目使用 npm run build 打包

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

uni-app 项目使用 npm run build 打包

原有的uniapp项目，创建项目的时候是没有vue-cli创建的，现在想使用npm run build 进行打包，想 保留原有的自定义打包命令和运行环境

在使用vuecli创建项目在把文件移到新的框架里面，发现自定义的运行环境没有了

Harmonyos Next教程
1 回复

在 uni-app 项目中使用 npm run build 进行打包时，通常会涉及到配置和脚本的自动化处理。以下是一个基于 uni-app 项目的打包流程，包括必要的配置文件和代码示例。

1. 配置 manifest.json

首先，确保你的 manifest.json 文件配置正确，这是 uni-app 的全局配置文件。以下是一个基本的配置示例：

{
  "name": "uni-app-demo",
  "appid": "__UNI__XXXXXX",
  "version": {
    "name": "1.0.0",
    "code": "100"
  },
  "platforms": {
    "mp-weixin": {
      "appid": "wxXXXXXXXXXX"
    }
  },
  "sdkConfigs": {},
  "condition": {}
}

2. 配置 vue.config.js

如果你使用了 Vue CLI 插件来支持 uni-app，vue.config.js 文件用于自定义 webpack 配置。以下是一个简单的配置示例：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  },
  chainWebpack: config => {
    // 自定义其他 webpack 配置
  }
};

3. 配置 package.json

确保你的 package.json 文件中包含了 build 脚本。通常，uni-app 提供了内置的打包命令，你可以直接使用：

{
  "name": "uni-app-demo",
  "version": "1.0.0",
  "scripts": {
    "build": "cross-env NODE_ENV=production uni-app-cli service dist"
  },
  "dependencies": {
    "uni-app-cli": "^latest-version",
    "vue": "^2.6.11",
    // 其他依赖
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    // 其他开发依赖
  }
}

4. 执行打包命令

在终端中运行以下命令进行打包：

npm run build

这将触发 uni-app 的打包流程，生成生产环境的代码，并放置在 dist 目录中。

注意事项

  • 确保所有依赖都已正确安装。
  • 打包前可以运行 npm run lint 进行代码检查。
  • 根据不同的平台（如 H5、小程序等），可能需要额外的配置和插件。
  • 打包过程中可能会遇到路径、依赖或配置问题，请检查相关文档和日志进行调试。

通过上述步骤，你应该能够成功使用 npm run build 对 uni-app 项目进行打包。

回到顶部