Vue 中生成源码映射文件，配置 map

如何开启开发环境的源码映射（source map）

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: 'source-map'  // ！！！打开 map
  },
  chainWebpack:config=>{
    config.plugin('html').tap(args=>{
      args[0].title = 'xxxxxxxxxx'
      return args
    })
  }
})

---

解释：

• transpileDependencies: true

  如果你有使用需要转译的依赖（比如部分旧版第三方库），开启它可以避免兼容性问题。

• configureWebpack

  这是 Vue CLI 的一个配置项，允许你直接写原生 webpack 配置。

  这里用它来设置 devtool 属性。

• devtool

  控制是否生成 source map。

  • 'source-map' 会生成完整的独立 .map 文件，调试时能看到未压缩的源码和准确行列号。
  • false 关闭 source map，减少打包体积，也保护源码。

• process.env.NODE_ENV

  Node.js 运行环境变量，区分开发和生产环境，通常 'development' 或 'production'。

• chainWebpack

  通过链式调用修改 webpack 配置，示例中修改了 html 模板插件中的网页标题。

---

使用步骤：

1. 在项目根目录新建或修改 vue.config.js，写入上面代码。
2. 运行 npm run serve（开发模式），浏览器开发者工具可以看到源码调试。
3. 运行 npm run build（生产模式），不会生成 source map，代码体积更小且源码不暴露。

---