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项目的根目录中

移动的时候注意事项:

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

  • 如下是HBuilderX项目

vite.config.js 配置

注意事项

  • vue 3项目生效
  • 支持情况
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生产环境变量文件,就可以根据开发环境和生产环境的不同来读取上两个环境变量文件,这样也便于本地调试与线上部署的不同来回去切了。

最后,如有错误请大家指正!

祝大家向上、愉快。

相关推荐
aklry2 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin939 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子10 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982410 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug12 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo13 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢36 分钟前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机42 分钟前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
Struggler28144 分钟前
解决setTimeout/setInterval计时不准确问题的方案
前端
sophie旭1 小时前
《深入浅出react开发指南》总结之 10.1 React运行时总览
前端·react.js·源码阅读