uni-app之cli 编译打包

小灰灰 2022-12-01 15:52 690阅读 0赞

> 除了HBuilderX可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。

### 目录 ###

*  环境安装
 *  创建uni-app
 *  运行发布
 *  注意
 *  将已有的项目改造
 *  上传微信小程序代码

# 环境安装 #

全局安装vue-cli

npm install vue-cli -g

# 创建uni-app #

*  使用正式版（对应HBuilderX最新正式版）
    
        vue create -p dcloudio/uni-preset-vue my-pro
 *  使用alpha版（对应HBuilderX最新alpha版）
    
        vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

此时，会提示选择项目模板，初次体验建议选择 hello uni-app 项目模板  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lDSl94aXlhbmc_size_16_color_FFFFFF_t_70_pic_center]  
创建项目时，会提示是否安装npm的淘宝镜像，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lDSl94aXlhbmc_size_16_color_FFFFFF_t_70_pic_center 1]选择模板后，会自动安装项目依赖，并提示你以`npm run serve` 运行

# 运行发布 #

在项目根目录下package.json 可以看到

npm run dev:%PLATFORM%
    npm run build:%PLATFORM%

的取值如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lDSl94aXlhbmc_size_16_color_FFFFFF_t_70_pic_center 2]

# 注意 #

*  cli创建的项目，编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器，执行npm update。
 *  已经使用cli创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。
 *  cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。

# 将已有的项目改造 #

将之前的代码复制到src目录下  
![在这里插入图片描述][20200828105636715.png_pic_center]  
将之前项目的npm 依赖转移到当前package中，H5初始页面  
放在public中

*  安装scss编译器
    
        npm install node-sass sass-loader --save-dev

# 上传微信小程序代码 #

*  安装miniprogram-cli
    
        npm install miniprogram-ci --save-dev
 *  在微信小程序后台开发设置 代码上传 中配置ip白名单 和下载上传密钥
 *  使用方式分两种

1.  在项目中引用，编写package.json 脚本
    
        const ci = require('miniprogram-ci')
        let {  wxVersion: version, wxDesc: description } = require('./package.json')
        
        if (!version) version = 'v1.0.0'
        if (!description) description = new Date() + '上传'
        
        const project = new ci.Project({ 
          appid: '',
          type: 'miniProgram',
          projectPath: process.cwd() + '/dist/build/mp-weixin',
          privateKeyPath: process.cwd() + '/key/private..key',
          ignores: ['node_modules/**/*'],
        })
        ci.upload({ 
          project,
          version,
          desc,
          setting: { 
            minify: true,
          },
        }).then(res => { 
          console.log(res)
          console.log('上传成功')
        }).catch(error => { 
          if (error.errCode == -1) { 
            console.log('上传成功')
          }
          console.log(error)
          console.log('上传失败')
          process.exit(-1)
        })
    
        "upload-wx": "npm run build:mp-weixin && node upload.wx.js"
2.  使用命令行
    
        miniprogram-ci \
          upload \
          --pp ./demo-proj/ \
          --pkp ./private.YOUR_APPID.key \
          --appid YOUR_APPID \
          --uv PACKAGE_VERSION \
          -r 1 \
          --enable-es6 true \

更多请看[https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html][https_developers.weixin.qq.com_miniprogram_dev_devtools_ci.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lDSl94aXlhbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/e171f4a2d22a40c4aae694fa7700e11f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lDSl94aXlhbmc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/ae8367fb5eaa449e882d905b72fa69d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lDSl94aXlhbmc_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/ba9c53621d9741d6a020e3fc5cbce67a.png
[20200828105636715.png_pic_center]: /images/20221123/09b9a7d1493a4c33a087acc159212aa9.png
[https_developers.weixin.qq.com_miniprogram_dev_devtools_ci.html]: https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html