Vue.js项目中source map的配置与使用

Vue.js项目中source map的配置与使用

引用

CSDN

1.

https://m.blog.csdn.net/weixin_42707397/article/details/138272402

在前端开发中，调试是一个非常重要的环节。Vue.js项目中，通过使用source map，开发者可以更方便地定位和修复代码中的问题。本文将详细介绍Vue.js项目中source map的配置和使用方法。

开发环境配置

在开发环境中，为了方便调试，通常需要开启source map。在Vue.js项目中，可以通过在vue.config.js文件中添加以下配置来开启source map：

devtool: 'eval-source-map'

这样配置后，控制台报错的行数将与源码行数完全一致，便于开发者快速定位问题。

生产环境配置

在生产环境中，source map的配置需要根据具体需求进行调整：

1. 如果只想定位报错的具体行数，且不想暴露源码，可以将devtool的值设置为nosources-source-map。
2. 如果需要在生产环境中定位问题，同时显示行号和源码，可以将devtool的值设置为source-map。

Vue2中的完整配置示例

在Vue2项目中，source map的相关配置如下：

module.exports = {
  publicPath: './',
  devServer: {
    open: true,
    hotOnly: true,
    proxy: {
    },
  },
  lintOnSave: false,
  css: {
    loaderOptions: {
    },
  },
  runtimeCompiler: true,
  productionSourceMap: true,//SourceMap是否开启
  configureWebpack: {
    devtool: 'source-map',//SourceMap模式
    //警告 webpack 的性能提示
    performance: {
      hints: 'warning',
      //入口起点的最大体积
      maxEntrypointSize: 50000000,
      //生成文件的最大体积
      maxAssetSize: 30000000,
      //只给出 js 文件的性能提示
      assetFilter: function (assetFilename) {
        return assetFilename.endsWith('.js');
      },
    },
  }
};

Vue3中的完整配置示例

在Vue3项目中，source map的相关配置如下：

module.exports = {
    //开发调试阶段 设置为eval-source-map
    // devtool:"eval-source-map",
    //实际发布的时候 建议可以选择nosources-source-map或者关闭sourceMap
    devtool:"nosources-source-map",
    mode: 'development',
    // 3. 插件的数组，将来 webpack 在运行时，会加载并调用这些插件
    plugins: [htmlPlugin,new CleanWebpackPlugin()],
    //指定要处理的路径
    entry: path.join(__dirname, './src/index.js'),
    //输出的文件路径
    output: {
        //存放的目录
        path: path.join(__dirname, 'dist'),
        //js存放目录
        filename: 'js/bundle.js',
    },
    performance: {
 
        hints: false
    },
    devServer: {
        open: true,
    },
}

浏览器中查看source map

在浏览器中，可以通过以下步骤查看source map：

1. 打开浏览器的开发者工具（通常按F12或右键选择“检查”）。
2. 切换到“Sources”面板。
3. 在左侧的文件列表中，找到你的项目文件。
4. 在右侧的代码编辑器中，可以看到具体的源码及其行数。

通过以上配置和步骤，开发者可以在Vue.js项目中更方便地使用source map进行代码调试。