从节点模块在VueJS中提供firebaseui.css时出现问题

时间:2019-02-08 17:24:21

标签: javascript node.js firebase vue.js vue-cli

所以基本上我现在已经有很长时间了,以为我已经解决了,但事实并非如此。

我从this guide开始开发网站,它帮助我使用vue-cli创建了PWA。

在向其中添加Firebase身份验证时,我还使用了this guide将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资源的链接时,我的浏览器中出现一个“无法获取/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" />

现在,我的网站在运行“ npm run dev”时正确加载了所有firebaseui组件,但现在在运行“ npm run build”时它仍然不执行该操作,因为我的服务器会打印以下内容:

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

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

基本上,我正在寻求一种使用firebaseui.css的方法,而不必更改dev-server.js中的内容以使其在生产环境中正常工作,或者要求有人告诉我构建目录中还需要哪些其他文件编辑以使其正常工作。

预先感谢您,如果您需要查看更多我的代码,请提出要求,我将更新此帖子!

1 个答案:

答案 0 :(得分:1)

该死,所以我进行了更多的通用挖掘,并找到了以下讨论:

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

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

现在我只需添加

import 'firebaseui/dist/firebaseui.css'
我的main.js中的

和firebaseui组件在开发和生产版本上均正确呈现! :)