如何解决VueJS+Tailwind CSS应用Docker化后CSS加载失败问题？

你的问题核心在于Nginx配置的根路径错误，以及Docker中未正确加载自定义Nginx配置文件，以下是具体修正方案：

1. 修正Nginx配置文件 #

将location /块内的root值改为/usr/share/nginx/html（对应Docker中存放dist文件的目录），同时补全配置文件的闭合结构：

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /usr/share/nginx/html; # 修正为dist文件实际存放目录
      index  index.html;
      try_files $uri $uri/ /index.html; # 补充目录请求的处理逻辑
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
} # 补全缺失的闭合括号

2. 修正Dockerfile的配置文件复制路径 #

原Dockerfile将配置文件复制到了/app/nginx.conf，但Nginx默认不会加载该路径的配置，需将配置文件复制到Nginx默认配置目录替换默认文件：

# 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
# 将自定义配置复制到Nginx默认配置路径，覆盖默认配置
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

3. 验证操作 #

• 重新构建镜像：docker build -t vue-tailwind-app .
• 启动容器：docker run -p 8080:80 vue-tailwind-app
• 访问http://localhost:8080，检查浏览器控制台是否仍存在CSS加载报错

额外检查项 #

• 确认npm run build执行后，dist/assets目录下存在编译后的CSS文件（如app.[hash].css）
• 检查dist/index.html中CSS的引用路径，应为类似<link rel="stylesheet" href="/assets/app.[hash].css">的绝对路径

内容的提问来源于stack exchange，提问作者Steven Diffey