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

默认.conf:

# no stream module..

server {
# a simple server module..
}

mongo.conf:

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