docker build 后 index.html 中的外部嵌入式 css 丢失答案

【问题标题】：External embedded css in index.html missing after docker builddocker build 后 index.html 中的外部嵌入式 css 丢失
【发布时间】：2021-09-06 14:19:03
【问题描述】：

我有一个 Vue/Webpack 应用程序，它在我的 index.html 文件中使用了一个外部引用的嵌入式 CSS 链接。它看起来像：

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
    />
   ...
  </head>

如果我在项目目录中运行npm run build，生成的dist/index.html 文件将包含此链接。

但是，我将我的项目部署在 Docker 容器中。在该容器构建过程结束时，此 CSS 链接和其他类似链接将在生成的 index.html 文件中消失，导致我页面上的几个元素以图形方式中断。

webpack/Docker 配置中的哪些设置可能导致这种情况发生？

【问题讨论】：

标签： html css docker npm webpack

【解决方案1】：

我找到了解决方案 - 似乎我的 Dockerfile 包含工作目录的 src 和 resources 文件夹的副本，但不包含包含 favicon 和基本 @987654324 的 public 文件夹@。这意味着作为npm run build 的一部分自动生成的index.html 永远不会考虑上述代码行。

【讨论】：