uni-app vite+ts+vue3模式 集成微信云开发

本文主要是介绍uni-app vite+ts+vue3模式 集成微信云开发，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.创建uni-app项目

此处使用的是通过vue-cli命令行方式uni-app官网

使用vue3/vite版

创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

(我创建失败，直接从gitee下载的模板)

2.manifest.json应用配置

manifest.json 应用配置 | uni-app官网

cloudfunctionRoot

如果需要使用微信小程序的云开发，需要在 mp-weixin 配置云开发目录

"mp-weixin":{// ..."cloudfunctionRoot": "cloudfunctions/", // 配置云开发目录// ...
}

在项目根目录创建上边配置的云开发目录文件 cloudfunctions

（在cloudfunctions随便建议空白文件或者js文件方便步骤3复制文件）

3.配置vite.config.js将cloudfunctions复制到编译后的项目文件中

安装vite-plugin-files-copy

npm install vite-plugin-files-copy -D

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
const path = require('path')
import CopyPlugin from 'vite-plugin-files-copy'// https://vitejs.dev/config/
let env=process.env.NODE_ENV;
let to="./"+(env == 'development' ? 'dist/dev' : 'dist/build')+'/mp-weixin/cloudfunctions';
console.log(to,"=====to")
export default defineConfig({plugins: [uni(),CopyPlugin({patterns: [{from: './cloudfunctions',to:to},],}),]});

4.进行云开发

这篇关于uni-app vite+ts+vue3模式 集成微信云开发的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---