HBuilderX图形化创建uniapp项目后如何爆改支持cli指令发行

用HBuilderX图形化创建的uniapp项目，后期想改用cli命令行方式进行发行打包，需要怎么改造项目结构？目前直接在项目目录执行npm run build会报错，求具体配置修改步骤。

2 回复

在HBuilderX创建的项目根目录下，执行npm init -y生成package.json。然后安装uni-app cli依赖：npm install @dcloudio/uni-cli-shared -D。修改package.json，添加scripts脚本：“dev:app”: “uni -p app”。之后即可通过npm run dev:app等指令进行编译。


在HBuilderX图形化创建uniapp项目后，可以通过以下步骤改造支持CLI指令发行：

1. 安装必要依赖

npm install -g @vue/cli @vue/cli-service
npm install --save-dev uni-cli-shim

2. 创建vue.config.js 在项目根目录创建vue.config.js文件：

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  },
  transpileDependencies: ['@dcloudio/uni-ui']
}

3. 修改package.json 添加scripts脚本：

{
  "scripts": {
    "dev:h5": "uni -p h5",
    "build:h5": "uni build -p h5",
    "dev:mp-weixin": "uni -p mp-weixin", 
    "build:mp-weixin": "uni build -p mp-weixin"
  }
}

4. 项目结构调整

  • 确保pages.json、manifest.json在根目录
  • 静态资源放在static目录
  • 页面文件放在pages目录

5. 使用CLI命令

# 开发环境
npm run dev:h5
npm run dev:mp-weixin

# 生产构建
npm run build:h5  
npm run build:mp-weixin

注意事项：

  • 确保node_modules中包含uniapp相关依赖
  • 首次使用需执行npm install安装依赖
  • 如遇路径问题，检查vue.config.js中的alias配置

这样就实现了在保留HBuilderX图形化开发便利性的同时，支持CLI指令发行。

回到顶部