时间戳

首页 > 解决方案 > VueJS - prod build 从 HTML 中删除属性引号

vue.js - VueJS - prod build 从 HTML 中删除属性引号

问题描述

首先，在缩小的生产版本中从 HTML 中删除属性引号是标准的吗？似乎这会导致某些浏览器/平台出现问题？如果是这样，那么下面的一切都无关紧要，但我仍然很好奇。

我有以下vue.config.js内容，它可以在产品构建中保留属性引号，但会破坏纱线服务。

本地 Vue 版本 2.6.12。@vue/cli 版本 4.5.4。

  chainWebpack: (config) => { // chainWebpack grayed out
    config.plugin("html").tap((args) => {
      args[0].minify.removeAttributeQuotes = false;
      return args;
    });
  },

它似乎没有找到minify- 我不断得到：ERROR TypeError: Cannot set property 'removeAttributeQuotes' of undefined

标签： vue.jswebpack

解决方案

首先，在缩小的生产版本中从 HTML 中删除属性引号是标准的吗？

它不是标准的，但仍然是有效的 HTML。在生产版本中删除了属性引号以减少 HTML 大小的输出大小，因此如果您在 DEV 环境中（例如在运行时yarn serve），则对象args[0].minify为undefined.

因此，为了在生产构建中保留引号并且在其他环境中不出错，您可以removeAttributeQuotes按如下方式设置属性（而不是像在代码中那样修改其值）：

chainWebpack: (config) => {
    config.plugin('html').tap((args) => {
      args[0].minify = {
        ...args[0].minify,
        removeAttributeQuotes: false,
      }
      return args
    })
  },

查看相关问题

推荐阅读