uniapp实现微信小程序调用云函数【vue3】

本人是从微信开发者工具写原生微信小程序一步一步走来,由于vue3框架的慢慢的步入前端市场,为了不被前端市场遗弃,果断从vue2开始步入vue3的学习,本人习惯在在HBuilder X写uniapp的项目,过去uniapp默认vue2框架,现在可以选择vue3框架了,遇到了一个很大的问题,就是由于cloudfunctions不是在默认的目录结构中,运行到微信开发者工具里面时候,发现cloudfunctions没有一起编译进来,更要命的是原来在vue2里面用的vue.config.js可选的配置文件用于copy-webpack-plugin对项目的复制竟然不能用了,所以我开始研究官方的文档,我发现了这个:

同样和vue.config.js是一个可选的配置文件,但是专门对vue 3 生效,然后,我就解决我云函数无法复制到unpackag文件夹下的问了,具体步骤如下:

一、创建一个基于vue 3 的uniapp

二、创建vue.config.js文件并复制以下代码

代码如下:

复制代码
import { defineConfig } from 'vite';
import fs from 'fs-extra';
import path from 'path';
import uni from '@dcloudio/vite-plugin-uni';
 
function copyFile() {
	return {
		enforce: 'post',
		async writeBundle() {
			await fs.copy(
				path.resolve(__dirname, 'cloudfunctions'),
				path.join(
					__dirname,
					'unpackage/dist',
					process.env.NODE_ENV === 'production' ? 'build' : 'dev',
					process.env.UNI_PLATFORM,
					'cloudfunctions'
				)
			);
		},
	};
}
 
export default defineConfig({
	plugins: [uni(),copyFile()],
});

三、创建装云函数的 cloudfunctions 文件夹,【文件夹里面必须随便写点代码】

四、配置 manifest.json 文件的内容

五、运行

如果出现不是【当前环境为---】,那就是得你自己配置一下微信小程序的云环境了。到这步就算完成了

相关推荐
右子1 天前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
木易 士心1 天前
Uni-App 实现多身份动态切换 TabBar 指南
uni-app
江城开朗的豌豆1 天前
uni-app弹层遮罩难题?看我如何见招拆招!
前端·javascript·微信小程序
江城开朗的豌豆1 天前
小程序生命周期漫游指南:从诞生到落幕的完整旅程
前端·javascript·微信小程序
江城开朗的豌豆1 天前
跨平台开发实战:我的小程序双端(iOS、安卓)开发指南
前端·javascript·微信小程序
毕设源码-江学长1 天前
计算机毕业设计java共享茶室预约微信小程序 微信小程序中的共享茶室预订平台 茶室共享预约小程序的设计与开发
java·微信小程序·课程设计
说私域2 天前
私域整体结构的顶层设计:基于“开源AI智能名片链动2+1模式S2B2C商城小程序”的体系重构
人工智能·小程序·开源
2501_915106322 天前
CDN 可以实现 HTTPS 吗?实战要点、部署模式与真机验证流程
网络协议·http·ios·小程序·https·uni-app·iphone
昔冰_G2 天前
Vue内置组件KeepAlive——缓存组件实例
vue.js·缓存·vue3·vue2·keep-alive·vue组件缓存·vue内置组件
云起SAAS3 天前
SCL-90症状自评量表抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·scl-90症状自评量表·scl-90