Css 不适用于 Dockerized VueJs 项目

Question

我创建了一个 VueJs 项目并将其部署到 AWS。我已经根据文档 (Real-World Example section)对项目进行了 dockerized 。我刚刚添加了一行来复制我的 nginx conf 文件，如下所示：

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY confs/nginx/nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

然后我意识到当我检查页面 url 时我的 css 不起作用。我也有一个这样的conf文件：

events {
  worker_connections  4096;  ## Default: 1024
}

http {

  server {

    listen 80;

    location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      include /etc/nginx/mime.types;
      try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {
      root   /usr/share/nginx/html;
    }

  }
}

我知道 nginx css 问题有很多答案，我已经尝试了很多，但仍然找不到任何解决方案。

这些是我已经尝试过的几种解决方案。

Nginx 无法加载 css 文件

Nginx 无法加载 CSS 和 JS 文件（MIME 类型错误）？

Firebase“资源解释为样式表，但使用 MIME 类型 text/html 传输”

Answer 1

您必须在 http 部分设置“include /etc/nginx/mime.types”

http {
  include /etc/nginx/mime.types;
  server {
    ...
  }
}