Vue CLI 项目迁移中样式调试利器：开启 CSS SourceMap 定位源文件

.amap-icon img,
.amap-marker-content img {
  width: 25px;
  height: 34px;
}

::v-deep .amap-icon img {
  width: 30px !important;
  height: 30px !important;
}

// vue.config.js
module.exports = {
  css: {
    sourceMap: true, // 开启 css  source map，
  },
  productionSourceMap: true, // 开启 JS  sourceMap
};

npm run serve

{
  // SourceMap规范版本（当前为3）
  "version": 3,
  // 原始文件路径数组
  "sources": [
    "webpack:///node_modules/@smallwei/avue/lib/index.css",
    "webpack:///node_modules/nprogress/nprogress.css",
    "chunk-vendors.33662982.css",
    "webpack:///node_modules/element-ui/lib/theme-chalk/index.css"
  ],
  // 这个数组包含了源代码中的标识符（如变量名）
  "names": [],
  // 使用Base64 VLQ编码的位置映射信息
  "mappings": "AAAk2gC,gBAAqJ,CCkBv/gC,gBAUM,2CCEN,CC9BiB,oIAAoI,iBAAiB,CAAC,gEAAgE,mBAAmB,CAAC,mdAAmd,eAAe,CAAC,WAAW,yBAAA,CAA0B,wHAAiH,CAAA,eAAoB,CAAA,mBAAkB,CAAA,iBAAA,CAAA,uCAAuC,mCAA+C,CAAA,UAAkB,CAAA,iBAAgB,CAAA,eAAoB,CAAA,mBAAoB,CAAA,mBAAc,CAAA,aAAA,CAAA,uBAA6C,CAAA,oBAAA,CAAA,kCAAmC,CAAA,iCAAkC,CAAA,GAAG,2BAAA,CAA4B,mBAAmB,CAAC,GAAK,+BAAA,CAAiC,uBAAwB,CAAC",
  "file": "chunk-vendors.33662982.css",
  // 原始文件内容
  "sourcesContent": []
}

.amap-icon img,
.amap-marker-content img {
  width: 25px;
  height: 34px;
}

//  package.json
"dependencies":{
   "@smallwei/avue": "2.6.18",
}

// JavaScript 文件
//# sourceMappingURL=app.min.js.map

/* CSS 文件 */
/*# sourceMappingURL=styles.css.map */

sequenceDiagram
 participant Browser
    participant DevTools
    participant Server

    Browser->>Server: 请求 app.min.js
    Server-->>Browser: 返回 JS 文件 + sourceMappingURL
    DevTools->>Server: 请求 app.min.js.map (异步)
    Server-->>DevTools: 返回 SourceMap 文件
    DevTools->>DevTools: 解析映射关系
    Note right of DevTools: 建立位置映射表
    DevTools-->>Browser: 显示原始源代码位置

graph LR
    A[SourceMap优势] --> B[快速定位生产环境问题]
    A --> C[完整错误堆栈追踪]
    A --> D[还原混淆代码]
    E[SourceMap风险] --> F[暴露源代码]
    E --> G[增加文件体积]
    E --> H[潜在安全漏洞]

// vue.config.js
module.exports = {
  productionSourceMap: false, // 禁用 SourceMap 生成
};

graph TD
    A[构建系统] --> B[生成 app.js]
    A --> C[生成 app.js.map]
    B --> D[部署到生产 CDN]
    C --> E[上传到安全存储]
    F[错误监控系统] --> E
    G[开发者] --> E

// vue.config.js
module.exports = {
  productionSourceMap: true,
  configureWebpack: {
    devtool: "hidden-source-map", // 不包含 sourceMappingURL
  },
};

location ~ \.map$ {
    # IP白名单
    allow 192.168.1.0/24;
    deny all;

    # 基础认证
    auth_basic "SourceMap Access";
    auth_basic_user_file /etc/nginx/.htpasswd;

    # JWT验证
    auth_request /auth;
}

location = /auth {
    internal;
    proxy_pass http://auth-service/verify;
    proxy_pass_request_body off;
    proxy_set_header Content-Length "";
    proxy_set_header X-Original-URI $request_uri;
}