Vue-Cli:为啥在构建后 index.html 没有用引号生成?

Posted

技术标签:

【中文标题】Vue-Cli:为啥在构建后 index.html 没有用引号生成?【英文标题】:Vue-Cli: why after the build the index.html is not generated with quotes?Vue-Cli:为什么在构建后 index.html 没有用引号生成? 【发布时间】:2020-12-17 16:27:16 【问题描述】:

运行 npm 构建后,会生成不带引号的 ./dist/index.html 文件。该项目没有 webpack.config.jsvue.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>

【问题讨论】:

【参考方案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
    )
  

【讨论】:

这是一个无效的有效 html。如果在浏览器中打开 html,则返回空白页。但是感谢您的回答,尽管我已经以相同的方式使用 removeAttributeQuotes 解决了它。 有趣。你有失败的例子吗?

以上是关于Vue-Cli:为啥在构建后 index.html 没有用引号生成?的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli生成项目后添加静态资源,第三方js库

vue-cli在index.html判断环境变量加载不同代码

为啥我在构建 Flutter Web 时会出现白屏

为公共文件夹中的文件提供在构建期间读取环境变量的能力,如 index.html 所做的

vue-cli2.X中引入高德地图,将其设为全局对象

vue-cli 项目中 需要知道常见的配置