当前位置：首页 > ai >正文

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

ai 2025/7/18 23:20:18

前言：升级项目的两种方式
步骤
- 一、新建项目【选择-默认模版】
- 二、修改-pages.json
- 三、补充-缺少的文件
- 四、修改-Main.js
- - 按照 [官方文档-vue2升级vue3迁移指南](https://uniapp.dcloud.net.cn/tutorial/migration-to-vue3.html) 修改
- 五、升级-uni-ui扩展组件的导入方式
- - 安装uni-modules Plugins
  - 安装方法
  - 兼容-手动注册自定义的组件
- 六、兼容-网络层改造
- - 兼容-代理模式发生转变
  - 兼容-h5端网络请求代理-manifest.json里面配置proxy
  - js脚本文件内部是jsx语法的问题
  - 兼容-subPackages模块化
  - 兼容-子包组件引用失败的问题
  - 子包被忽略打包上传的问题
升级-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 ...

六、兼容-网络层改造

兼容-代理模式发生转变

在这里插入图片描述

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

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