如何在 vue/nuxt 应用程序中导入/配置 mongodb 包？答案

【问题标题】：How to import/configure the mongodb package in a vue/nuxt application?如何在 vue/nuxt 应用程序中导入/配置 mongodb 包？
【发布时间】：2020-03-30 14:17:34
【问题描述】：

下面的示例适用于 NodeJ，但我无法让它在 VUE 组件或中间件中工作。后端是 VueCLI 和 NUXT。

// Connection test (NodeJs)
const db = require("mongodb").MongoClient;
// import mongodb from "mongodb"
// const db = mongodb.MongoClient
const dbc = new db("mongodb://localhost:27017", {
    useNewUrlParser: true,
    useUnifiedTopology: true
});
dbc.connect(() => {
    console.log("Connection succesfull!")
})

警告+错误是：

有人知道如何正确设置吗？

【问题讨论】：

你真的不应该通过 vue 组件与数据库交互，vue 是要编译成客户端 js/html 的。看起来该软件包从未安装或未正确安装。确保它存在于你的 package.json 中。
感谢您指出这一点。我假设 vue cli 已经支持后端代码。我将看看 Vue.js 的不同后端选项。

标签： node.js mongodb vue.js nuxt.js

【解决方案1】：

你真的不应该通过 vue 组件与数据库交互，vue 是要编译成客户端 js/html 的。

但是要回答您的问题，该软件包似乎从未安装或未正确安装。确保它存在于你的 package.json 中

更多关于为什么你不应该将你的数据库凭据添加到你的 vue 应用程序：您在 vue 中编写的所有内容都将可供最终用户查看。因此，如果您将数据库凭据添加到您的 vue 组件，任何人都可以在生产中看到它，并且我确定您不希望这样！ Vue 编译为纯 html/js/css 一堆后端框架，如 .net、django、flask、express 支持 Vue，因为它编译为纯 html！

我也是这个时候，当时我不懂 Vue，所以没关系。

【讨论】：