所以基本上我已经有很长时间了,以为我已解决了这个问题,但事实并非如此。
我从本指南开始开发网站,它帮助我使用vue-cli创建了PWA。
在向其中添加firebase身份验证时,我还使用了本指南将firebaseui添加到我的项目中。
它告诉我将此行添加到我的index.html
<link type="text/css" rel="stylesheet" href="node_modules/firebaseui/dist/firebaseui.css" />
Run Code Online (Sandbox Code Playgroud)
不幸的是,这没有解决,我在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.
Run Code Online (Sandbox Code Playgroud)
这是2个月前,在尝试找到临时解决方案之前,我尝试了很多方法来解决此问题:
当跟随指向CSS资源的链接时,我的浏览器中出现“无法获取/node_modules/firebaseui/dist/firebaseui.css”的提示,我认为本地服务器可能没有在提供此文件。
所以我进入了build / dev-server.js文件并添加了这一行:
app.use(express.static('node_modules'))
Run Code Online (Sandbox Code Playgroud)
并将index.html中的链接更改为:
<link type="text/css" rel="stylesheet" href="/firebaseui/dist/firebaseui.css" />
Run Code Online (Sandbox Code Playgroud)
现在,我的网站在运行“ npm run dev”时正确加载了所有firebaseui组件,但是现在在运行“ npm run build”时它仍然不执行此操作,因为我的服务器显示了以下内容:
"GET /firebaseui/dist/firebaseui.css" Error (404): "Not found"
Run Code Online (Sandbox Code Playgroud)
我想这是有道理的,因为我之前写下来是因为我以前只更改了dev-server.js中的代码,而不更改了与构建/生产相关的文件中的代码
基本上,我正在寻求一种使用firebaseui.css的方法,而不必更改dev-server.js中的内容以使其在生产中正常工作,或者有人告诉我必须编辑的build目录中的其他文件这行得通。
在此先感谢您,如果您需要查看更多我的代码,请提出要求,我将更新此帖子!