uni-cli 工程转换为 HBuilderX 工程

1.uniapp的开发方式有两种

1.1 HBuilderX：可视化，应用工具

优点

HBuildX属于推荐开发工具，当公司存在多个项目都为HBuildX时，方便管理可以转换为HBuildX工程。
项目需要调试第三方插件，需要制作自定义基座来真机调试(这也是本人从uni cli工程转为HBuilderX工程的原因)

1.2 cli开发：命令行，开发工具

开发工具可以使用HBuilderX、VSCode、WebStorm等。

2.uniapp-cli 工程转换为 HBuilderX 工程

uniapp-cli创建项目我使用的是 vue3 + vite + js模板参考uniapp-cli官方文档

2.1 HBuilderX新建一个模板

1.打开HBuilderX新建一个vue3项目

2.在HBuilderX项目中使用npm

如果之前在uniapp-cli项目中使用了npm包的话，就需要做这一步

在HBuilderX中初始化npm后，会在其根目录出现package.json文件
只需要在uniapp-cli项目中的package.json文件中复制到HBuilderX项目的package.json如下两个属性即可
- dependencies
- devDependencies

package.json 复制代码

{
 "dependencies": {
   "clipboard": "^2.0.11",
   "dayjs": "^1.11.10"
 },
 "devDependencies": {
   "unocss": "^0.52.3",
   "unocss-applet": "0.2.22",
   "unplugin-auto-import": "^0.19.0"
 }
}

在HBuilderX项目中完成了package.json后，打开终端执行npm install命令

3.在uniapp-cli项目中复制src文件夹下的内容到HBuilderX项目的根目录中

移动的时候注意事项:

uniapp-cli根目录中index.html记得也移到HBuilderX项目的根目录中。
如果在uniapp-cli中使用了uview-plusui库的，需要重新安装，在官方文档中按照HBuilderX项目中使用安装。

如下是uniapp-cli项目
如下是HBuilderX项目

vite.config.js 配置

注意事项

仅vue 3项目生效
支持情况
- CLI 工程创建教程
- HBuilderX 3.2.0 及以上版本

vite.config.js 复制代码

import { defineConfig, loadEnv } from 'vite';
import uniModule from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'

const Uni = uniModule.default || uniModule
export default defineConfig(async ({command, mode})=> {
        // 从当前工作目录加载环境配置文件，并根据指定的模式（如开发、生产等）读取相应的环境变量
        // mode 表示当前运行模式（例如 'development' 或 'production'）。
        // __dirname 返回当前工作目录的路径。
        // loadEnv 函数会根据传入的模式和路径加载相应的环境配置。
	const envConfig = loadEnv(mode, __dirname) 
	const UnoCss = await import('unocss/vite').then(i => i.default) // 我在项目中使用了unocss, 并且在项目根目录配置了unocss.config.js文件
	return {
		plugins: [
			Uni(),
			UnoCss(),
			AutoImport({
				imports: [
				  'vue',
				  'pinia',
				  'uni-app'
				]
			}),
		],
		resolve: {
			alias: {
				'@/': './', // 为了兼容之前在uniapp-cli中给src目录中的路径别名
			},
		},
		server: {
		  host: '0.0.0.0',
		  port: 6001,
		  proxy: {
			'/app-api': {
			  target: envConfig.VITE_BASE_URL, // 读取环境变量中配置的请求服务器地址
			  changeOrigin: true
			}
		  }
		},
	}
});

如上则是我项目中vite.config.js的配置

在如上文件中配置envConfig的属性，能读取.env文件中配置的环境变量，因为在根目录创建了.env.development开发与.env.production生产环境变量文件，就可以根据开发环境和生产环境的不同来读取上两个环境变量文件，这样也便于本地调试与线上部署的不同来回去切了。

最后，如有错误请大家指正！

祝大家向上、愉快。