nginx 如何让Tailwind CSS与VueJS和Docker一起工作

yruzcnhs  于 2023-05-28  发布在  Nginx
关注(0)|答案(1)|浏览(194)

我有一个VueJS与Tailwind应用程序,运行良好的npm run dev,但当我Dockerise它,CSS无法找到。
这是文件夹结构的简化视图

runplan/
│
└───dist/
│   [build files, inc assets]       
│   output.csv
│   
└───node_modules/
│   
└───src/
│   input.css
│   
│Dockerfile
│nginx.conf
│package.json
│tailwind.config.js

这是我的Dockerfile

# 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 ./nginx.conf /app/nginx.conf
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

这是nginx配置

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   /app;
      index  index.html;
      try_files $uri  /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }

我已经对Dockerfile做了很多调整。
任何帮助获得CSS加载是赞赏。
非常感谢!

相关问题