[英]How to fix "ReferenceError: require is not defined" in vuejs
我正在处理一个 vuejs + firebase 项目,我试图导入 firestore,但是当我访问我的页面时,这显示在控制台中:ReferenceError: require is not defined
我试图将导入部分放在 mount() 中,但它说我需要将导入的东西放在顶部,这就是我所做的
这是在我的 html (register.html) 正文下方:
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-firestore.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyCNYH-sKZZXZhZt5LxQSDqwet7OTo5KgHM",
authDomain: "thelogoagency-3a11d.firebaseapp.com",
databaseURL: "https://thelogoagency-3a11d.firebaseio.com",
projectId: "thelogoagency-3a11d",
storageBucket: "",
messagingSenderId: "101296201242",
appId: "1:101296201242:web:00d0e7e3554b518d"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="register.js"></script>
我的 register.js 顶部
// Required for side-effects
require("firebase/firestore");
var app = new Vue({
el: "#root",
data: {
burgerClass: "navbar-burger",
menuClass: "navbar-menu",
mobileMenuIsActive: "",
mobileMenuHasBeenClicked: false,
firstNameInput: "",
lastNameInput: "",
emailInput: "",
passwordInput: "",
authError : "",
emailErrorClass : "",
emailErrorHelp : "",
passwordErrorClass : "",
passwordErrorHelp : "",
inputClass: "input ",
nameErrorHelp: "",
isLoading: false,
firebase: firebase,
db: null,
numberOfInit: 0
},
并安装()
if(this.numberOfInit = 0)
firebase.initializeApp({
apiKey: 'AIzaSyCNYH-sKZZXZhZt5LxQSDqwet7OTo5KgHM',
authDomain: 'thelogoagency.tk',
projectId: '1:101296201242:web:00d0e7e3554b518d'
});
this.db = firebase.firestore();
this.numberOfInit ++
this.db.collection("users").add({
first: "Ada",
last: "Lovelace",
born: 1815
})
.then(function(docRef) {
console.log("Document written with ID: ", docRef.id);
})
.catch(function(error) {
console.error("Error adding document: ", error);
});
}
它应该正常工作,因为它是从 firebase 的文档中复制的。 我知道我可能做错了 :) 感谢您的帮助
Require 符号仅在您使用 npm 并编译 JS 代码时使用。 我认为您打算只使用 CDN 脚本标签,以便您可以删除 require 行。
如果您使用的是 Javascript 而不是 NodeJS,则只需将您的库与
<script src="https://my/lib.js"></script>
所以你可以删除你的require
行:)
在 npm 上安装 firebase-admin 和 firebase,然后试试这个“require('firebase-admin')”而不是 require("firebase/firestore"); ,以及给你的提示,在客户端运行后端服务是不可能的
因此,我尝试仅删除require()内容,但现在控制台向我发送日志:添加文档时出错:FirebaseError:“缺少权限或权限不足”。
感谢您回答我的问题,我有点卡住了:)
我修复它的方式是,我只是删除了这两行!
const firebase = require("firebase");
require("firebase/firestore");
如果您使用的是 javascript 而不是 NodeJS,则不需要。
你只需要这些cdns
<script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-firestore.js"></script>
并开始firestore:
firebase.initializeApp(firebaseConfig);
var db = firebase.firestore();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.