如何在生产 Vue.js 中禁用源映射或调试模式 - Webpack

Posted 2023-02-22

【中文标题】如何在生产 Vue.js 中禁用源映射或调试模式 - Webpack

【英文标题】：How to disable source map or debug mode in production Vue.js - Webpack

【发布时间】：2019-05-30 09:15:33

【问题描述】：

我正在开发一个 Vue.js 项目，所有文件都是由 webpack 在开发和生产模式下生成的。

但这是我的问题：

当我检查一个元素时，我可以在 devtools 中看到我的 vue 组件。

我怎样才能禁用它？

顺便说一句，源映射被禁用，我在 dist 文件夹中没有 .map 文件。

谢谢你:)

【问题讨论】：

你能发布你的 webpack 配置吗？

@CodyG。这是我的 webpack.prod.conf gist url，如您所见，我禁用了 extractTextplugin，因为 prod 中的 css 顺序错误

@CodyG。 gist.github.com/HamidOsouli/c4303b966d8665b9fe8633544bece068

你不需要 vue-loader 吗？你的 vue 组件是如何编译的？

@CodyG。我有一个 vue 加载器，我的项目是 vue-webpack-template。我该怎么办？

【参考方案1】：

如果 webpack 是从头开始配置的，可以在 webpack 生产文件中通过删除或注释来移除它 devtool 选项

tools/webpack.prod.js

    module.exports = merge(common, 
      // devtool: "source-map",
      mode: "production",
      ...
    );

【参考方案2】：

只需查看Vue cli docs：

productionSourceMap 类型：布尔

默认：真

如果您不需要，将其设置为 false 可以加快生产构建速度 用于生产的源地图。

所以在你的 webpack 配置中你写：

module.exports = 
  productionSourceMap: false
;

如果负责 webpack 配置的 vue.config.js 不存在，则可以创建它。

【讨论】：

谢谢你的工作，现在所有样式都在生产中内联，只是一个问题：是否可以禁用 extractTextPlugin 并将样式移动到生产模式中内联？