uni-app Vue3/Vite版下使用 pinia-plugin-persistedstate 为 app 开发环境添加 pinia 持久化能力时构建项目报错

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app Vue3/Vite版下使用 pinia-plugin-persistedstate 为 app 开发环境添加 pinia 持久化能力时构建项目报错

产品分类

uniapp/App

开发环境信息

项目 信息
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows11 23H2
手机系统 Android
手机系统版本号 Android 14
手机厂商 小米
手机机型 Redmi K50 Pro
页面类型 vue
vue版本 vue3
打包方式 离线
项目创建方式 CLI
CLI版本号 @vue/cli 5.0.8

示例代码

import { createPinia } from "pinia";  
import persisted from "pinia-plugin-persistedstate";  

const pinia = createPinia();  
pinia.use(persisted);  

export default pinia;  

export * from "./useUserInfoStore";

操作步骤

import { createPinia } from "pinia";  
import persisted from "pinia-plugin-persistedstate";  

const pinia = createPinia();  
pinia.use(persisted);  

export default pinia;

预期结果

import { createPinia } from "pinia";  
import persisted from "pinia-plugin-persistedstate";  

const pinia = createPinia();  
pinia.use(persisted);  

export default pinia;

实际结果

import { createPinia } from "pinia";  
import persisted from "pinia-plugin-persistedstate";  

const pinia = createPinia();  
pinia.use(persisted);  

export default pinia;  

/**  
* [vite]: Rollup failed to resolve import "destr" from "D:/DataBase/WorkSpace/templete Android_iOS/node_modules/pinia-plugin-  
* persistedstate/dist/index.js".  
* This is most likely unintended because it can break your application at runtime.  
* If you do want to externalize this module explicitly add it to  
* `build.rollupOptions.external`  
*/

bug描述

使用 pinia-plugin-persistedstate 为 pinia 添加持久化能力时，运行 app 开发环境时报出以下构建错误。

[vite]: Rollup failed to resolve import “destr” from “D:/DataBase/WorkSpace/templete Android_iOS/node_modules/pinia-plugin-persistedstate/dist/index.js”. This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to build.rollupOptions.external


Harmonyos Next教程
7 回复

插件市场有修改过可以应用于uniapp的，你可以搜一下


好的，感谢解答，我去试试

貌似已解决。
报错情况是使用的 pnpm 来执行构建。
找到个相似问题：https://ask.dcloud.net.cn/question/202410，更换成 npm 来构建能够正常构建运行。

换成 yarn 之后是否正常了？javascript:;

回复 DCloud_UNI_OttoJi: 试了下，yarn 构建也是正常的

回复 亲爱的皂gaigai: ok

在uni-app Vue3/Vite版中使用pinia-plugin-persistedstate为应用添加Pinia持久化能力时，如果构建项目报错，通常可能是由于配置问题或者依赖不兼容。以下是一个基本的配置示例，包括如何安装依赖、配置Pinia和pinia-plugin-persistedstate，以及解决一些常见的构建错误。

步骤 1: 安装依赖

首先，确保你已经安装了pinia和pinia-plugin-persistedstate。如果还没有安装，可以使用以下命令进行安装：

npm install pinia pinia-plugin-persistedstate

步骤 2: 配置Pinia

在你的main.js或main.ts中，配置Pinia和pinia-plugin-persistedstate插件：

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

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

// 使用插件
pinia.use(piniaPluginPersistedstate)

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

步骤 3: 创建Store并配置持久化

在你的stores文件夹下创建一个新的store文件，例如user.js：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: null,
  }),
  persist: true, // 启用持久化
})

步骤 4: 解决构建错误

如果构建项目时出现错误，可能是由于以下原因：

  1. 依赖不兼容：确保pinia和pinia-plugin-persistedstate的版本兼容。
  2. 配置错误：检查vite.config.js或vue.config.js（如果你使用的是Vue CLI）中是否有与Pinia或插件相关的特殊配置。
  3. 插件内部错误：查看pinia-plugin-persistedstate的GitHub仓库，看是否有其他人遇到类似问题或有修复的版本。

示例：Vite配置

通常，Vite的配置不需要为Pinia或pinia-plugin-persistedstate做特别设置，但如果你遇到特定于Vite的错误，可能需要检查以下配置：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  // 其他配置...
})

确保你的配置文件中没有与Pinia或持久化插件冲突的设置。如果问题依旧存在，请提供具体的错误信息以便进一步分析。

回到顶部