javascript - 从 Node 模块在 VueJS 中提供 firebaseui.css 的问题

标签 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 资源的链接时,我在浏览器中收到“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" />

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

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

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

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

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

最佳答案

天哪,所以我做了更多的通用挖掘并发现了这个讨论:

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

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

现在我简单地添加了

import 'firebaseui/dist/firebaseui.css'

在我的 main.js 中,firebaseui 组件在开发和生产构建中都正确呈现! :)

关于javascript - 从 Node 模块在 VueJS 中提供 firebaseui.css 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54597443/

相关文章:

javascript - 如何按排序键顺序获取对象中的最后一项

node.js - 使用node-mysql和mysql-queue将多个查询结果发送到res.render()

android - 未调用 Firebase onMessageReceived

javascript - 如何在expo React Native中将图像上传到firebase

javascript - vue 最奇怪的行为 - 注释代码正在运行

javascript - 复选框的单击无法使用 JavaScript

javascript - 使用 Websockets 调用特定函数?

javascript - jquery-templ 的回调函数?

mysql - 如何使用 Sequelize 和 mySql 选择外键列的名称?

android - iOS 是否具有与 Android 一样的应用内更新功能?