[随笔] 升级uniapp旧项目的vue、pinia、vite、dcloudio依赖包等

汇总

bash 复制代码
# 升级uniapp项目dcloudio整体依赖,建议执行多次
# 会顺带自动更新/升级vue的版本
npx @dcloudio/uvm@latest alpha

# 检查 pinia 的最新版本
npm view pinia version

# 更新项目 pinia 到最新版本
npm update pinia

# 更新项目 pinia 到特定的版本
# 首先,修改项目packages.json里面对应依赖的版本,
# 然后运行:
npm install

前提

node -v 以前是v14.21.3 现在是v22.14.0

旧项目版本

"@dcloudio/uni-app": "^3.0.0-alpha-3050520220824001"

"vue": "^3.2.37"

"vite": "^2.9.14"

"pinia": "^2.0.20"

升级前的报错

1) HBuilderX预览项目后,无报错,白屏 ,显示运行地址

> Local: http://localhost:3000/xxx

http://localhost:3000/xxx运行在右边的Web浏览器中,运行,开始报错(下一个报错...)

2) 报错 vite.createFilter is not a function

原因:vite版本与安装的依赖版本不匹配,升级vue版本或者降低vite版本

解决:vite.createFilter is not a function 问题解决-CSDN博客

(我们在执行"++npx @dcloudio/uvm@latest alpha++"之后就解决了)

升级后的报错

3) 升级vite到v5后,

报错:Uncaught TypeError: (intermediate value).globEager is not a function,

出处:const modules = import.meta.globEager('./modules/**/*.ts')

解决办法:vite3、4升级vite5后 import.meta.globEager方法不存在及ts异常问题解决

解决办法:https://blog.csdn.net/tekin_cn/article/details/144070214

**4)**报错vue.runtime.esm.js? [sm]:1480 Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?

...关键词!before calling "app.use(pinia)" > 要么没call,要么晚call...

报错:

解决办法:

1.先看看各种store有没有正确的定义?

import { defineStore } from 'pinia'

export const useUserStore = defineStore({})

2.再看看各种store有没有正确的引用 + useXXStore()实例化?

import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

3.确实没问题,按照pinia官方手册,完整对比下官网的所有步骤! (当前pinia版本)

手册:https://pinia.vuejs.org/zh/getting-started.html

发现问题:main.js [main.ts] 未正确引入pinia。 >> 问题解决

javascript 复制代码
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

5) 报错:u未定义... 分析:u是uviewUI (或者vk-uview-ui)的内置函数组合,挂载到uni全局对象中。
原因:uview未挂载成功,官网方法:https://uviewui.com/components/install.html

但本项目使用\src\plugins\index.ts统一挂载,另有pinia、vconsole等。

其中,浅谈import.meta.glob和import.meta.globEager的区别

既然isFunction通不过,那就,直接run! (...难不成isObject??)

javascript 复制代码
import { App } from 'vue'
const modules = import.meta.glob('./modules/**/*.ts', {
	eager: true, import: 'default'
})

export default {
    install: (app: App) => {
        for (const module of Object.values(modules)) {
			module(app)
        }
    }
}

ojbk!

6)...

More

NPX

NPM 是一个 Node 包管理器,NPX 是一个 Node 包执行器。Node 的执行也可以 NPM 来完成,但是必须进行本地安装,通过定位本地路径或者配置 scripts 来能执行。NPX 则通过一个简单命令大大简化了包运行的成本,既可以运行本地包,也可以远程包,无需安装包也可以执行该包,这就有效避免了本地磁盘污染的问题,节省了本地磁盘空间。

https://juejin.cn/post/7189924390274859066

更新依赖到指定版本

可以使用 @dcloudio/uvm 管理编译器的版本,此工具仅自动增加或更新 uni-app 编译器主要依赖,对于新增的编译命令(scripts)暂时不会自动处理,需手动参考新工程进行配置。

https://uniapp.dcloud.net.cn/quickstart-cli.html#cliversion

uniapp版本管理器

uvm = uni-app version manager

https://www.npmjs.com/package/@dcloudio/uvm

ending...

相关推荐
回忆哆啦没有A梦2 小时前
Vue页面回退刷新问题解决方案:利用pageshow事件实现缓存页面数据重置
前端·vue.js·缓存
A_ugust__3 小时前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生3 小时前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js
yi碗汤园3 小时前
【一文了解】C#的StringSplitOptions枚举
开发语言·前端·c#
cxr8285 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
小菜全5 小时前
《React vs Vue:选择适合你的前端框架》
vue.js·react.js·前端框架
emma羊羊5 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
真的想不出名儿8 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊8 小时前
Polar WEB(1-20)
前端
笨蛋不要掉眼泪8 小时前
SpringBoot项目Excel成绩录入功能详解:从文件上传到数据入库的全流程解析
java·vue.js·spring boot·后端·spring·excel