如何在 vuejs 中修复“ReferenceError：require is not defined”答案

【问题标题】：How to fix "ReferenceError: require is not defined" in vuejs如何在 vuejs 中修复“ReferenceError：require is not defined”
【发布时间】：2019-08-24 09:02:21
【问题描述】：

我正在开发一个 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
    },

和mounted()

        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("firebase/firestore");，您需要使用捆绑程序（我不确定 ESM - JS 模块）。如果您将使用像 webpack 这样的捆绑程序，它将用库的源代码替换您的需求。如果你在脚本标签中有它，你可以删除它，你不需要它。

标签： javascript firebase vue.js google-cloud-firestore

【解决方案1】：

如果你使用的是 Javascript 而不是 NodeJS，你只需要将你的 lib 链接到

<script src="https://my/lib.js"></script>

所以你可以删除你的require 行:)

【讨论】：

【解决方案2】：

Require 符号仅在您使用 npm 并编译 JS 代码时使用。我认为您打算只使用 CDN 脚本标签，以便您可以删除 require 行。

【讨论】：

【解决方案3】：

在 npm 上安装 firebase-admin 和 firebase，然后试试这个 "require('firebase-admin')" 而不是 require("firebase/firestore"); , 给你一个提示，在客户端是不可能运行后端服务的

【讨论】：

但是，我认为这是firebase的目标
顺便说一句我不想使用 Node

【解决方案4】：

我修复它的方式是，我只是删除了这两行！

        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();

【讨论】：