使用 vuejs 时，没有在 html 文件中导入 firebase 脚本标签
Posted
技术标签:
【中文标题】使用 vuejs 时，没有在 html 文件中导入 firebase 脚本标签【英文标题】：firebase script tags are not being imported in html file when using vuejs 【发布时间】：2021-05-13 00:21:30 【问题描述】：您好，我正在使用来自VueJs 的安装版本，工作正常我还导入了MaterializeCss
这也可以正常工作，我导入了firebase firestore，全部在index.html 文件中。
但是当我尝试在另一个vue 文件中使用db variable 时，它说db 没有定义。我不明白为什么会出现这个错误，因为Materializecss 工作正常。
这是我的 HTML 文件。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without javascript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-firestore.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig =
apiKey: "AIzaSyBl17wo7ihuMdACz_iZ3T9rRYZ4_yjSRtI",
authDomain: "school-boeken.firebaseapp.com",
projectId: "school-boeken",
storageBucket: "school-boeken.appspot.com",
messagingSenderId: "164926430822",
appId: "1:164926430822:web:a97b3f7bdcec364beb97a7",
measurementId: "G-M7QE3Y21N2"
;
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
var db = firebase.firestore();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
【问题讨论】：
请添加代码以显示您是如何尝试的。 你想在 Vue 文件中使用import firebase from '@/plugins/firebase.js'; 和 const db = firebase.firestore(); 吗？
是的，我确实尝试过，但它给了我一个错误，提示找不到 Module: Error: Can't resolve '@/plugins/firebase.js'
那是因为你需要在一个名为plugins 的目录中创建一个firebase.js 文件，在其中添加firebaseConfig 等并导出它。如果您有不同的文件结构，当然也可以。
【参考方案1】：
尝试在main .js中连接firebase
import Vue from 'vue'
import App from './App.vue'
import firebase from 'firebase/app'
import 'firebase/firestore'
export const db = firebase.initializeApp(
apiKey: "AIzaSyBl17wo7ihuMdACz_iZ3T9rRYZ4_yjSRtI",
authDomain: "school-boeken.firebaseapp.com",
projectId: "school-boeken",
storageBucket: "school-boeken.appspot.com",
messagingSenderId: "164926430822",
appId: "1:164926430822:web:a97b3f7bdcec364beb97a7",
measurementId: "G-M7QE3Y21N2"
).firestore()
export const firestore = firebase.firestore()
new Vue(
render: h => h(App)
).$mount('#app')
然后在你可以使用的组件中
import db from '@/main.js'
【讨论】：
为什么在main.js 中这样做？在它自己的firebase.js 文件中执行此操作不是更好的做法吗？
我同意。也许你是对的。我同意。也许你是对的。但是这个选项有生命权）以上是关于使用 vuejs 时，没有在 html 文件中导入 firebase 脚本标签的主要内容，如果未能解决你的问题，请参考以下文章
VueJS 和 SASS - 在脚本中导入和使用 SASS 变量