Nuxt3集成Pinia生产环境报错：无法找到pinia模块

问题分析 #

生产构建后出现Cannot find module 'pinia/dist/pinia'错误，核心原因是Pinia未被正确纳入Nuxt3的生产构建流程，或Store的使用方式不符合Nuxt3的SSR规范，导致服务端无法定位依赖文件。

解决步骤 #

1. 切换为Nuxt官方Pinia模块 #

原生Pinia需手动适配Nuxt3的SSR和构建逻辑，官方提供的@pinia/nuxt模块已做好兼容处理：

• 安装依赖：

  npm install @pinia/nuxt pinia
  # yarn用户执行：yarn add @pinia/nuxt pinia
  

• 在nuxt.config.ts中注册模块：

  export default defineNuxtConfig({
    modules: ['@pinia/nuxt']
  })
  

2. 修正组件中Store的使用方式 #

原代码在data()中直接实例化Store，可能触发SSR生命周期冲突，改为Nuxt3推荐的写法：

选项式API改进：

<script>
import { useNavbarStore } from '~/store/navbar'

export default {
  setup() {
    const store = useNavbarStore()
    return { store }
  },
  methods: {
    getLink(to) {
      return `/${to}`
    }
  }
}
</script>

组合式API（更简洁）：

<script setup>
import { useNavbarStore } from '~/store/navbar'
const store = useNavbarStore()

const getLink = (to) => `/${to}`
</script>

3. 清理缓存并重新构建 #

缓存残留可能导致依赖路径异常，执行以下操作：

• 删除构建产物：

  # Windows系统
  rmdir /s /q .output
  # macOS/Linux系统
  rm -rf .output
  

• 删除依赖和锁文件：

  rm -rf node_modules package-lock.json
  # yarn用户替换为：rm -rf node_modules yarn.lock
  

• 重装依赖并重新构建：

  npm install
  npm run build
  

4. 检查Pinia导入路径 #

确保Store文件中Pinia的导入路径正确，避免使用相对路径：

// 正确写法
import { defineStore } from 'pinia'

// 错误写法（禁止使用）
import { defineStore } from '../../node_modules/pinia'

验证 #

执行npm run start启动生产服务，检查网站是否正常运行，无模块找不到的报错。

内容的提问来源于stack exchange，提问作者Kraier