将function导入js文件后VueJS报错

Question

我制作了一个 js 脚本，允许我将数据发送到数据库，我想将它导入到 my.vue 文件中，以便在单击按钮时可以使用它。 问题是当我导入脚本并且页面上没有显示任何内容时，Vue 向我显示此错误：

warning  in ./src/views/Journal.vue?vue&type=script&lang=js&

"export 'default' (imported as 'mod') was not found in '-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Journal.vue?vue&type=script&lang=js&'

我的 js 脚本：

const mysql = require("mysql");

async function main(userID, text) {
  const connection = mysql.createConnection({
    host: "",
    user: "",
    password: "",
    database: "",
  });
  connection.connect(function (err) {
    if (err) throw err;
    console.log("Connected!");
    var sql = `INSERT INTO 'journal' ('userID', 'journalTXT') VALUES ('${userID}', '${text}')`;
    connection.query(sql, function (err) {
      if (err) throw err;
      console.log("1 record inserted");
      connection.destroy();
    });
  });
}
main();

我的页面：

<template>
  <div class="about" v-if="!$auth.isAuthenticated">
    <h1>Bienvenue sur ton journal</h1>
    <h2>Continue d'écrire ce qu'il te passe par la tête</h2>
    <v-container fluid>
      <v-row>
        <v-col cols="7" sm="12">
          <v-form>
            <v-textarea
              id="textarea"
              counter
              placeholder="Commence à écrire quelque chose ici "
              label="Mon journal"
              v-model="journal_txt"
            ></v-textarea>
          </v-form>
        </v-col>
      </v-row>
      <br />
      <v-btn elevation="2" x-large v-on:click="dataExport(journal_txt)"
        >Sauvegarder mon travail</v-btn
      >
    </v-container>
  </div>
</template>
<script>
import main from "@/sendToDB.js";
module.exports = {
  data: function () {
    return {
      journal_txt: "",
    };
  },
  methods: {
    dataExport: function (txt) {
      main.main("1", txt);
    },
  },
};
</script>

如果有人有解决方案，我会很乐意接受；）

Answer 1

您尝试通过 VUE 从客户端加载 NodeJS 脚本，这是不可能的，因为 vue 仅在客户端呈现。

你应该考虑使用 Nuxt.JS

https://nuxtjs.org

通过 nuxt，您可以创建服务器中间件并使用通过axios或$http连接到您的 api 中间件，以更新您的数据库。

https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-servermiddleware

希望它有所帮助。