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

news2025/5/6 0:56:45

汇总

# 升级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。 >> 问题解决

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??）

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）...

NPX

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

https://juejin.cn/post/7189924390274859066