从节点模块在 VueJS 中提供 firebaseui.css 的问题 [英] Problem serving firebaseui.css in VueJS from node module

问题描述

所以基本上我已经遇到这个问题很长时间了，我以为我已经解决了，但事实并非如此.

So basically I've got this problem for a long time now and thought I fixed it but that wasn't the case.

我使用 本指南，它帮助我使用 vue-cli 创建了 PWA.

I started the development of my site with this guide and it helped me create a PWA using the vue-cli.

在向其添加 Firebase 身份验证时，我还使用了 本指南 将 firebaseui 添加到我的项目中.

While adding firebase authentication to it I also used this guide to add firebaseui to my project.

它告诉我将此行添加到我的 index.html

It told me to add this line to my index.html

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

遗憾的是这没有解决，我在我的 chrome 控制台中收到此错误消息:

sadly this didn't worked out and I got this error message in my chrome console:

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 个月前的事情，在找到临时解决方案之前，我尝试了很多方法来解决此问题:

This was 2 months ago and I tried a lot of things to fix this issue before finding a temporary solution:

当我点击 CSS 资源的链接时，我的浏览器出现无法获取/node_modules/firebaseui/dist/firebaseui.css"，我想可能是我的本地服务器没有提供这个文件.

When following the link to the CSS resource I got a "Cannot GET /node_modules/firebaseui/dist/firebaseui.css" in my browser and I thought that maybe my local server wasn't serving this file.

所以我进入了 build/dev-server.js 文件并添加了这一行:

So I went into the build/dev-server.js file and added this line:

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

并将我的 index.html 中的链接更改为:

and changed the link in my index.html to:

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

现在我的网站在运行npm run dev"时正确加载了所有 firebaseui 组件，但现在在运行npm run build"时它仍然没有加载，因为我的服务器打印了这个:

Now my website correctly loads all firebaseui components when running "npm run dev" but now it still doesn't do it when running "npm run build" as my server prints this:

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

我想这是有道理的，因为我之前只更改了 dev-server.js 中的代码，而不是构建/生产相关文件中的代码

I guess this makes sense, as I am writing this down because I previously only changed the code in the dev-server.js and not in a build/production related file

基本上，我要求一种使用 firebaseui.css 的方法，而无需更改 dev-server.js 中的内容以使其在生产中工作，或者让某人告诉我必须在构建目录中的其他文件编辑以使其正常工作.

Basically, I am asking for a way to user the firebaseui.css without having to change stuff in the dev-server.js to have it work in production or for someone to tell what other files in the build directory I have to edit to make it work.

提前致谢，如果您需要查看我的更多代码，请索取，我会更新这篇文章！

Thanks in advance and if you need to see more of my code pls ask for it and I will update this post!

推荐答案

天啊，所以我做了更通用的挖掘，发现了这个讨论:

Holy shit, so I did more generic digging and found this discussion:

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

通过删除 index.html 中的导入和 dev-server.js 中现在无用的 app.use 行来解决我的问题

fixed my issue by deleting both the import in the index.html and the now useless app.use line in dev-server.js

现在我只是添加了

import 'firebaseui/dist/firebaseui.css'

在我的 main.js 中，firebaseui 组件在开发和生产版本上都正确呈现！:)

in my main.js and the firebaseui components are rendering properly on both the dev and production build! :)

这篇关于从节点模块在 VueJS 中提供 firebaseui.css 的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！