HarmonyOS鸿蒙Next中uni-app基于uni cli创建的项目如何适配打包

【背景知识】

1. uni-app可以通过HBuilderX可视化界面创建项目，也可以通过uni cli创建项目。
2. HBuilderX创建的项目仅能在HBuilderX中开发，但基于uni cli创建项目既可以在vscode、webstorm中开发，也可以使用HBuilderX开发。

【解决方案】

一、配置依赖。

1. 在package.json的dependencies中配置：
   "@dcloudio/uni-app-harmony": "3.0.0-4080720251210001"。

   

2. 在package.json的scripts中配置：
   "dev:app-harmony": "uni -p app-harmony"。
   "build:app-harmony": "uni build -p app-harmony"。

   

3. 如果有uts插件，还需要在package.json的devDependencies中配置：
   "@dcloudio/uni-uts-v1": "3.0.0-4070620250821001"。

   

4. uni-app开发HarmonyOS只支持Vue3（不仅仅支持组合式写法，也支持选项式写法）、不支持Vue2，不支持plus、但支持nvue，见兼容性说明。

二、通过uni cli构建产物。

三、通过HBuilderX打包。

HBuilderX可以导入识别其他App平台构建产物，然后在HBuilderX中运行、打包，但目前不支持HarmonyOS平台。

其他App平台和HarmonyOS平台均支持导入整个uni-app项目，然后在HBuilderX中运行、打包。

四、配置环境变量。
因为HarmonyOS不能直接通过HBuilderX导入uni cli构建产物打包无法指定mode，因此需要通过vite配置环境变量。

import uni from '@dcloudio/vite-plugin-uni';
import {
  defineConfig,
  loadEnv
} from 'vite'
// 需要npm i dotenv安装dotenv依赖包
import dotenv from 'dotenv';
import config from './config/config.js';
import envConfig from './env/config.json';

// 优先使用配置文件中的CURRENT_ENV变量
const currentEnv = envConfig.CURRENT_ENV || 'uat';

// 不能使用process.cwd()，需要使用__dirname
// 注入env配置文件，先注入的优先级高
dotenv.config({
  path: `${__dirname}/env/.env.local`
});
dotenv.config({
  path: `${__dirname}/env/.env.${currentEnv}`
});
dotenv.config({
  path: `${__dirname}/env/.env`
});

// 根据currentEnv读取配置文件，第三个参数指定为空字符串可以读取非VITE_开头的变量
const env = loadEnv(currentEnv, __dirname, '');

export default defineConfig(({
  command,
  mode
}) => {

  return {
    plugins: [uni()],
    // VITE_开头的变量可以在代码中通过import.meta.env调用，
    // 非VITE_开头的变量不会放到import.meta.env中需要在此自定义
    define: {
      __APP_ENV__: JSON.stringify(currentEnv),
      __APP_ENV_DATA__: JSON.stringify(env.ENV_DATA),
      __APP_CONFIG__: config[currentEnv]
    }
  }
})

const common = {
  commonData: 'commonData'
}
export const uat = {
  ...common,
  baseUrl: 'uat_baseUrl'
}

export const prod = {
  ...common,
  baseUrl: 'prod_baseUrl'
}

export default {
  uat,
  prod
}

COMMON_DATA = "COMMON_DATA"
VITE_CUSTOM_DATA = "VITE_CUSTOM_DATA"

CURR_ENV = 'UAT'
ENV_DATA = "UAT_DATA"

CURR_ENV = 'PROD'
ENV_DATA = "PROD_DATA"

{
  "CURRENT_ENV": ""
}

【总结】
通过HBuilderX创建的uni-app项目使用的HBuilderX的依赖，uni cli脚手架创建的uni-app项目用的是项目中package.json的配置的依赖。
因此基于uni cli创建的uni-app项目，包括若依、unibest等，需要更新@dcloudio依赖至最新版并添加@dcloudio/uni-app-harmony依赖，然后参考uni-app适配HarmonyOS开发指南进行适配。
另外HBuilderX目前无法识别uni cli构建的HarmonyOS平台的产物，建议用HBuilderX导入整个uni-app项目。