时间戳

首页 > 解决方案 > 部署后未加载 Ant Design

reactjs - 部署后未加载 Ant Design

问题描述

我构建了一个应用ant设计的react项目，官方文档为react-app-rewired。Css 在 之后加载得很好yarn start，但是 afteryarn build没有加载。我使用 Docker 和 Nginx 进行部署。其他组件运行良好，但只有蚂蚁设计被破坏并出现在屏幕上。

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    }),
);

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "noImplicitAny": false,
        "charset": "utf8"
    },
    "include": ["src"],
    "exclude": ["./node_modules/**/*"]
}

...
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
...
"devDependencies": {
    "@types/react-router-dom": "^5.1.7",
    "babel-plugin-import": "^1.13.3",
    "customize-cra": "^1.0.0",
    "react-app-rewired": "^2.1.8"
  }
...

FROM node:12 as builder
RUN mkdir /app
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY ./package*.json ./
COPY ./yarn.lock ./

RUN apt-get update
RUN apt install yarn -y
RUN yarn global add react-scripts@4.0.2
RUN yarn install
COPY . .
RUN yarn run build

# Production build

FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY ./nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

标签： reactjsdockerantdant-design-pro

解决方案

这是Nginx的问题。我使用 Nginx docker 容器来部署带有自定义的 React 构建项目nginx.conf。它无法通过添加配置来提​​供具有 mime 类型的 css 文件include mime.types。

worker_processes auto;

events { worker_connections 1024; }

http {

  include mime.types; # MUST BE ADDED
  sendfile on;

  server {
    listen 80;

推荐阅读