时间戳

首页 > 解决方案 > docker build 后 index.html 中的外部嵌入式 css 丢失

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

问题描述

index.html我有一个 Vue/Webpack 应用程序，它在我的文件中使用了一个外部引用的嵌入式 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 配置中的哪些设置可能导致这种情况发生？

标签： htmlcssdockernpmwebpack

解决方案

我找到了解决方案-似乎我的 Dockerfile 包含工作目录的srcand文件夹的副本，但不包含包含 favicon 和 base的文件夹。这意味着作为一部分自动生成的永远不会考虑上述代码行。resourcespublicindex.htmlindex.htmlnpm run build

推荐阅读