NUXT安装VueFileAgent报$attrs等只读错误如何修改webpack配置

问题原因 #

该报错是因为项目中存在两份Vue实例副本：VueFileAgent依赖内部打包了独立的Vue版本，和Nuxt项目自带的Vue版本冲突导致。

解决方法 #

配置前准备 #

首先在项目根目录的配置文件头部引入path依赖，用于路径解析。 #

Nuxt2 配置步骤 #

打开根目录下的nuxt.config.js，在build配置项中添加extend方法修改webpack配置，示例如下：

const path = require('path')

module.exports = {
  // 此处保留你项目原有的其他配置，如head、css、plugins等
  build: {
    extend(config) {
      // 统一指定Vue的引用路径为项目根目录下的Vue依赖
      config.resolve.alias['vue'] = path.resolve('./node_modules/vue')
    }
  }
}

Nuxt3 配置步骤 #

打开根目录下的nuxt.config.ts（或.js），直接在顶级配置中添加alias字段即可：

import { defineNuxtConfig } from 'nuxt/config'
import path from 'path'

export default defineNuxtConfig({
  // 此处保留你项目原有的其他配置
  alias: {
    'vue': path.resolve('./node_modules/vue')
  }
})

配置后生效操作 #

配置完成后执行以下操作即可生效：

• 删除项目根目录下的node_modules文件夹
• 删除包管理工具对应的锁文件：package-lock.json（npm）/yarn.lock（yarn）/pnpm-lock.yaml（pnpm）
• 重新执行依赖安装命令：npm install/yarn install/pnpm install
• 重启Nuxt开发服务即可解决报错

额外注意 #

如果修改配置后仍有报错，请确认你安装的VueFileAgent版本适配你当前Nuxt对应的Vue大版本：

• Nuxt2对应Vue2，需安装适配Vue2的VueFileAgent版本
• Nuxt3对应Vue3，需安装适配Vue3的VueFileAgent版本

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