Проблема обслуживания firebaseui.css в VueJS из модуля узла - PullRequest
0 голосов
/ 08 февраля 2019

Так что, в принципе, у меня уже давно есть эта проблема, и я подумал, что исправил ее, но это не так.

Я начал разработку своего сайта с этого руководства и это помогло мне создать PWA с помощью vue-cli.

При добавлении к нему аутентификации firebase я также использовал это руководство , чтобы добавить firebaseui в мой проект.

Он сказал мне добавить эту строку в мой index.html

<link type="text/css" rel="stylesheet" href="node_modules/firebaseui/dist/firebaseui.css" />

К сожалению, это не сработало, и я получил это сообщение об ошибке в моей консоли Chrome:

Refused to apply style from 'http://localhost:8080/node_modules/firebaseui/dist/firebaseui.css'
 because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Это было2 месяца назад, и я пытался решить эту проблему, прежде чем найти временное решение:

При переходе по ссылке на ресурс CSS я получил сообщение «Cannot GET /node_modules/firebaseui/dist/firebaseui.css»."в моем браузере, и я подумал, что, возможно, мой локальный сервер не обслуживает этот файл.

Поэтому я пошел в файл build / dev-server.js и добавил следующую строку:

app.use(express.static('node_modules'))

и изменил ссылку в моем index.html на:

<link type="text/css" rel="stylesheet" href="/firebaseui/dist/firebaseui.css" />

NМой сайт корректно загружает все компоненты firebaseui при запуске «npm run dev», но теперь он по-прежнему не делает этого при запуске «npm run build», так как мой сервер печатает это:

"GET /firebaseui/dist/firebaseui.css" Error (404): "Not found"

Я думаю, это делаетсмысл, поскольку я записываю это, потому что ранее я только изменил код в файле dev-server.js, а не в файле, связанном со сборкой / производством

По сути, я прошу способ пользователя firebaseui.css без необходимости вносить изменения в файл dev-server.js, чтобы он работал в производственном процессе, или чтобы кто-то сказал, какие другие файлы в каталоге сборки я должен отредактировать, чтобы он работал.

Заранее спасибо иЕсли вам нужно увидеть больше моего кода, пожалуйста, спросите его, и я обновлю этот пост!

1 Ответ

0 голосов
/ 08 февраля 2019

Черт возьми, так что я сделал более общее копание и нашел это обсуждение:

https://github.com/vuejs-templates/webpack/issues/604

исправил мою проблему, удалив импорт в index.html и теперь бесполезное приложение.use строка в dev-server.js

, и теперь я просто добавил

import 'firebaseui/dist/firebaseui.css'

в мой main.js, и компоненты firebaseui корректно рендерится как на dev, так и на производственной сборке!:)

...