uniapp Vue2升级到Vue3，并发布到微信小程序的快捷方法

前言：升级项目的两种方式

1、拉取官方一套完整的项目作为地基，将自己的页面拿进去替换
2、新建一个最简单的模版，重新配置依赖项。【技术栈差异项过多时，这个方案最佳，故本文采用这个方案】

步骤

一、新建项目 【选择-默认模版】

二、修改-pages.json

三、补充-缺少的文件

四、修改-Main.js

按照 官方文档-vue2升级vue3迁移指南 修改

1、网络层：app.config.globalProperties.$request = request

五、升级-uni-ui扩展组件的导入方式

安装uni-modules Plugins

1、为什么要使用uni-modules ？官方文档-什么是uni-modules
2、实践表明：
components的方式官方已经不再推荐，继续使用得话只能手动从uni-modules里面的子目录里面复制出来，还会遇到项目不兼容的问题。
比如官方文档更新了某个组件支持什么属性，但是由于项目内引入的组件是老版本，可能就会导致一系列的报错。

安装方法

打开hbuilder之后记得选择项目，被这个坑了好几次了。

兼容-手动注册自定义的组件

示例代码如下：

<script>
// ... existing code ...
import customLink from "@/components/customlink/customlink.vue";  // 确保路径正确
export default {components: {customLink  // 添加组件注册},data() {// ... existing code ...

归纳-将所有自定义组件归到components文件中

六、兼容-网络层改造

兼容-代理模式发生转变

兼容-h5端网络请求代理-manifest.json里面配置proxy

"devServer": {"port": 8081,"proxy": {"/CpsWap": {"target": "http://alifen.4k5cs.cn/","changeOrigin": true},"/OrderWap": {"target": "http: //alifen.4k5cs.cn/","changeOrigin": true}}},

js脚本文件内部是jsx语法的问题

兼容-subPackages模块化

在主包中 注册 子包所需的全局网络对象

兼容-子包组件引用失败的问题

现象：

原因：在主包中引用（import）了子包中的资源文件，检查提示中的资源将其修正或移至主包。

子包被忽略打包上传的问题

现象：

原因：上面的问题解决了，这个问题就没有了。

七、兼容-Vue3导致的页面渲染问题

历史问题-铺货设置界面【扩展属性】死循环

现象：

原因：Vue3比Vue2性能更强大的原因，很大一部分原因就是Vue3的代理（Proxy）相比Vue2的Object.defineProperty更加强大，Vue3的Procy可以直接监听整个对象，监听属性的新增和删除，而Vue2需要递归遍历对象的每个属性进行监听，也无法直接监听属性的新增和删除。

导致死循环的代码分析：

watch: {WapExtItems: {handler(newVal) {newVal.forEach((item) => {item.content.forEach((subitem) => {if (subitem.type === "checkbox" && subitem.value.length > 0)this.settingData.ExtensionAttr[subitem.name] = subitem.value.join(",");else this.settingData.ExtensionAttr[subitem.name] = subitem.value;subitem.isShow = true;if (subitem.precondtion) {subitem.precondtion.forEach((conitem) => {if (this.settingData.ExtensionAttr[conitem.name] !== conitem.value) subitem.isShow = false;});}});});},deep: true,},},

解决：将计算逻辑移至computed中进行。

兼容-Vue3模版中不再支持< block >标签，改为使用 <template>，确保它与其他指令（如 v-if 或 v-for）结合使用，否则内容将不被渲染。

升级-状态管理Pinia 进行跨组件数据通信

建议参考 官方-状态管理Pinia

├── pages
├── static
└── stores└── counter.js
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss