Vue-Cli：为什么在构建后 index.html 没有用引号生成？

Question

在运行 npm 构建之后，生成的 ./dist/index.html 文件没有引号。该项目没有 webpack.config.js 或 vue.config.js。该构建是从使用 vue create 制作的示例项目生成的。我该如何解决？

<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>html-project</title><link href=/app.css rel=preload as=style><link href=/app.js rel=preload as=script><link href=/chunk-vendors.js rel=preload as=script><link href=/app.css rel=stylesheet></head><body><noscript><strong>We're sorry but html-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/chunk-vendors.js></script><script src=/app.js></script></body></html>

Answer 1

那里不需要属性引号（仍然是 valid HTML），因此它们在生产版本中被删除以减少 HTML 文件的输出大小。

如果您希望保留引号，您可以按如下方式配置 HTML minifier options（即，特别是 removeAttributeQuotes）：

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

Vue-Cli：为什么在构建后 index.html 没有用引号生成？

Vue-Cli: why after the build the index.html is not generated with quotes?

vue.js

vue-cli

vue-cli-4