uniapp vu3 vite 使用 微信小程序云开发

在原有的uniapp vu3项目(不是云开发)使用微信小程序云开发环境操作如下:

1、在uniapp项目manifest.json源码视图添加云开发目录及环境id配置:

2、对应在uniapp 项目目录下新建云函数目录cloudfunctions以及云函数(和微信小程序建立云函数一样操作):

3、在vite.config.js 加入复制配置,项目编译时会将云函数目录复制到编译后的文件夹下:

import {
	defineConfig
} from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import path from 'path'
import fs from 'fs-extra';

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'
				)
			);
		},
	};
}

/**
 * @type {import('vite').UserConfig}
 */

export default defineConfig({
	build: {
		sourcemap: false, // App,小程序端源码调试,需要在 vite.config.js 中主动开启 sourcemap
		rollupOptions: {}
	},
	server: {
		hmr: true,
	},
	plugins: [
		uni(),
		copyFile()
	],
});

4、App.vue文件初始化云开发:

在文件代码中直接调用

5、打包编译以及在微信开发者工具中上传部署云函数

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
搭建一个使用vue3+ts+vite+uniapp微信小程序的步骤如下: 1. 首先安装最新版的Node.js和npm。 2. 安装uni-app-cli脚手架工具,命令如下: ``` npm install -g @vue/cli npm install -g @vue/cli-init npm install -g @dcloudio/uni-cli ``` 3. 创建一个uni-app项目,命令如下: ``` vue create -p dcloudio/uni-preset-vue my-project ``` 4. 进入项目目录,安装依赖包,命令如下: ``` cd my-project npm install ``` 5. 安装并配置微信小程序开发者工具,下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 6. 在微信小程序开发者工具中,选择导入uni-app项目,选择项目目录下的dist/dev/mp-weixin文件夹,导入后即可进行开发和调试。 7. 如果需要使用vue3和typescript,在项目中安装相关依赖包,命令如下: ``` npm install --save-dev vue@next @vue/compiler-sfc typescript ts-loader ``` 8. 在项目根目录下创建vue.config.js文件,配置如下: ``` module.exports = { chainWebpack: config => { config.module .rule('ts') .use('ts-loader') .loader('ts-loader') .tap(options => { options.appendTsSuffixTo = [/\.vue$/] return options }) } } ``` 9. 在src目录下创建shims-vue.d.ts文件,内容如下: ``` declare module "*.vue" { import { ComponentOptions } from "vue"; const component: ComponentOptions; export default component; } ``` 10. 现在你就可以使用vue3和typescript进行开发了。同时,如果需要使用vite进行开发,可以参考uni-app官方文档进行配置:https://uniapp.dcloud.io/collocation/vite 以上就是使用vue3+ts+vite+uniapp搭建微信小程序的步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

少十步

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值