Vue.js项目文件突然不可修改，浏览器显示双标记(mapped)求助

问题描述 #

开发Vue.js项目时，部分文件突然变为不可修改状态，浏览器开发者工具中这些文件显示带有双标记（mapped）。使用Fedora 38系统，在测试不同表单验证库时出现该问题，将项目复制到Windows 11系统后问题依旧，无法修改这些文件，寻求恢复正常的方法。

项目配置文件 #

package.json #

{
  "name": "compta-frontend",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force"
  },
  "dependencies": {
    "@types/axios": "^0.14.0",
    "axios": "^1.6.2",
    "element-plus": "^2.4.4",
    "pinia": "^2.1.7",
    "vee-validate": "^4.12.3",
    "vue": "^3.3.11",
    "vue-router": "^4.2.5",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@tsconfig/node18": "^18.2.2",
    "@types/node": "^18.19.3",
    "@vitejs/plugin-vue": "^4.5.2",
    "@vue/tsconfig": "^0.5.0",
    "autoprefixer": "^10.4.16",
    "npm-run-all2": "^6.1.1",
    "postcss": "^8.4.32",
    "tailwindcss": "^3.4.0",
    "typescript": "~5.3.0",
    "unplugin-auto-import": "^0.17.2",
    "unplugin-vue-components": "^0.26.0",
    "vite": "^5.0.10",
    "vue-tsc": "^1.8.25"
  }
}

tsconfig.app.json #

{
    "extends": "@vue/tsconfig/tsconfig.dom.json",
     "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
     "exclude": ["src/**/__tests__/*"],
     "compilerOptions": {
          "composite": true,
          "noEmit": true,
          "baseUrl": ".",
          "types": ["node"],
              "paths": {
              "@/*": ["./src/*"]
        }
    }
}

tsconfig.json #

{
"files": [],
"references": [
    {
        "path": "./tsconfig.node.json"
    },
    {
        "path": "./tsconfig.app.json"
    }
],
    "compilerOptions": {
        // ...
        "types": ["element-plus/global"]
    }
}

tsconfig.node.json #

{
  "extends": "@tsconfig/node18/tsconfig.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*"
  ],
 "compilerOptions": {
      "composite": true,
      "noEmit": true,
      "module": "ESNext",
      "moduleResolution": "Bundler",
      "types": ["node"]
      }
}

浏览器开发者工具截图 #

按以下步骤逐一尝试：

1. 清除Vite缓存
   停止开发服务器，删除项目根目录下的node_modules/.vite文件夹，重新执行npm run dev启动服务。Vite缓存异常可能导致源映射错乱，清除后可重置映射关系。

2. 临时禁用源映射排查
   在vite.config.ts中添加配置禁用源映射：

   export default defineConfig({
     // 保留原有配置
     build: {
       sourcemap: false
     },
     server: {
       sourcemap: false
     }
   })
   

   重启服务后查看文件是否可修改，若恢复正常，说明源映射存在配置冲突，后续可重新开启并逐步排查插件影响。

3. 排查自动导入插件的影响
   你使用了unplugin-auto-import结合vee-validate，可能是自动导入插件错误映射了源文件。临时禁用该插件：

   • 在vite.config.ts中注释AutoImport相关配置
   • 删除项目中的auto-imports.d.ts文件（若存在）
   • 重启开发服务器观察问题是否消失

4. 重置TypeScript配置

   • 暂时移除tsconfig.json中的"types": ["element-plus/global"]配置
   • 确认tsconfig.app.json的paths配置正确指向src目录
   • 执行npm run type-check -- --clean清除TypeScript缓存后重新编译

5. 检查文件权限

   • Fedora系统下执行chmod -R 755 src/赋予文件读写权限
   • Windows系统右键文件→属性，确保未勾选“只读”选项

6. 重新安装依赖
   删除node_modules、package-lock.json文件，执行npm install重新安装依赖，避免因依赖损坏导致的映射异常。

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