[移动开发]vue-cli+uni-app+vue3.0+ts构建自定义条件编译（飞书）小程序

一、新建项目
1.全局安装 vue-cli，如果有用vue-cli构建过项目可跳过该步

npm install -g @vue/cli

2.创建uni-app+vue3项目

vue create -p dcloudio/uni-preset-vue#vue3 uni-vue3-project

uni-app模板选择：默认模板(TypeScript)

二、添加配置

1.做一些对应飞书小程序的配置，可参考官网说明

package.json中加入如下配置：

"uni-app": {
    "scripts": {
      "mp-feishu": {
        "title": "飞书小程序",
        "env": {
          "UNI_PLATFORM": "mp-toutiao"
        },
        "define": {
          "MP-FEISHU": true
        }
      }
    }
  }

代码中使用自定义的条件编译：

// #ifdef MP-FEISHU
飞书端特有的API实现
// #endif

2.进入项目目录

cd uni-vue3-project

3.运行

npm run dev:custom mp-feishu

如果出现 Error: Cannot find module '@dcloudio/uni-cli-i18n'，装插件

npm i @dcloudio/uni-cli-i18n -D

再运行。

可以看到项目中多了文件夹：dist/dev/mp-toutiao，可以放到飞书开发者工具或在HBuilderX中选择运行->飞书小程序调试项目。

4.至此基本的构建已经完成，但是不够完美，如果我们有另外一个平台字节跳动小程序，比如编译到抖音的小程序，运行之后也会到dist/dev/mp-toutiao文件夹下，同一类型不同平台的包会互相覆盖，如此肯定是非常不方便，做如下配置可以运行到不同的包：

package.json中的scripts添加：

"build:mp-feishu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao UNI_OUTPUT_DIR=dist/build/mp-feishu vue-cli-service uni-build",
"dev:mp-feishu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao UNI_OUTPUT_DIR=dist/dev/mp-feishu vue-cli-service uni-build --watch",

命令行执行：

npm run dev:mp-feishu 

npm run build:mp-feishu

可以在dist文件夹下看到飞书端的包已经和一般字节跳动小程序包分开了：

?大功告成，愉快编码。如果本文对你有些许帮助，动动手指点个赞吧，你的鼓励是我创作的动力，笔芯?。