css - Vue元素在生产中缺少样式

Question

当我运行docker镜像并使用nginx代理请求时，我遇到了样式问题。

我看到所有的html标签，当我在浏览器中的“网络”选项卡上找到css和js文件时，css对我来说是正确的，但却没有，没有样式应用。基本上，所有的html标签看起来都是通用的并且令人讨厌。

当我进行开发时，我对样式没有任何疑问，当我只运行npm run build时，也会看到样式。

该项目是使用vue/cli构建的，但是我也尝试了使用Webpack早期版本的其他模板，导致了同样的问题。

在 .vue 文件中，我使用单一文件组件结构，并使用 lang =“scss” 。

我的nginx.conf看起来像这样:

load_module /usr/lib/nginx/modules/ngx_stream_module.so;

stream...

http {
    server {
        listen 80;
        charset utf-8;
        server_name vue-node;

        gzip                on;
        gzip_proxied        any;
        gzip_http_version   1.1;
        gzip_comp_level     5;
        gzip_min_length     256;
        gzip_vary           on;
        gzip_types text/css text/javascript text/xml text/plain application/javascript application/x-javascript application/json;

        root /opt/vue-node/dist;
        index index.html;

        location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
            access_log off;
            expires max;
            add_header Cache-Control "public, must-revalidate, proxy-revalidate";
        }

        location /api {
            proxy_pass http://vuenode:8000;
        }

        location / {
            try_files $uri $uri/ @rewrites;
        }
        location @rewrites {
            rewrite ^(.+)$ /index.html last;
        }
    }
}

我的Dockerfile:

FROM node:9-stretch

RUN apt-get update -y && apt-get install -y --no-install-recommends \
    vim \
    nginx

COPY . /opt/vue-node/
WORKDIR /opt/vue-node/

RUN rm -v /etc/nginx/nginx.conf
ADD packaging/nginx.conf /etc/nginx/
RUN echo "daemon off;" >> /etc/nginx/nginx.conf

RUN npm install -g npm \
 && npm install -g @vue/cli \
 && npm install \
 && npm run build

CMD [ "node", "server.js" ]
EXPOSE 80

我在docker-compose.yml中设置了NODE_ENV = production。

其他一切几乎都是由vue / cli设置的。

向我询问更多信息，我将提供它。
感谢您能获得的所有帮助!

Answer 1

我已经找到解决问题的方法。
问题是我对Nginx的无知。

当我覆盖 /etc/nginx/nginx.conf 的时，一些必要的默认nginx配置丢失了。我不确定这是什么设置，但我读到最佳实践是在 / etc / nginx / sites-enabled / 中添加自定义代理位置，该位置将由 / etc / nginx / nginx导入。 conf 文件默认情况下。我最终得到了:

Dockerfile:

COPY packaging/default.conf /etc/nginx/sites-enabled/default
COPY packaging/mongo.conf /etc/nginx/streams/available/mongo

default.conf:

# no stream module..

server {
# a simple server module..
}

mongo.conf:

stream {
# the stream module, proxy to mongodb..
}