Vue проекта отсутствует стиль в производстве

Question

Когда я запускаю свой образ докера и проксирую запросы с nginx , у меня возникают проблемы со стилем.

Я вижу все html-теги, нахожу файлы css и js, когда смотрю на вкладку network в браузере, css выглядит правильно для меня, НО есть стиль не применяется .По сути, все html-теги выглядят обобщенно и непривычно.

Когда я занимаюсь разработкой, у меня нет проблем со стилизацией, я также вижу стилизацию, когда просто запускаю npm run build .

Проект построен с использованием vue / cli , но я также пробовал другие шаблоны с более ранними версиями веб-пакетов, что приводило к той же проблеме.

В .vue Я использую структуру single-file-component и использую lang = "scss" .

My 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

Я установил NODE_ENV = production в моем docker-compose.yml.

Все остальное довольнотак же, как 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..
}