将函数导入 js 文件后出现 VueJS 错误

Posted 2023-02-16

【中文标题】将函数导入 js 文件后出现 VueJS 错误

【英文标题】：VueJS error after importing a function into a js file

【发布时间】：2021-07-07 20:08:23

【问题描述】：

我制作了一个 js 脚本，允许我将数据发送到数据库，我想将它导入到我的 .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();

我的 vue 页面：

<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>

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

【问题讨论】：

我没有看到您的示例中导出了您的 main 函数。 module.exports?还是一个简单的export default？

【参考方案1】：

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

你应该考虑使用 Nuxt.JS

https://nuxtjs.org

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

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

希望对您有所帮助。

【讨论】：

我必须重新开始我的项目还是只需要安装 nuxtJS？

Nuxt.js 是 Vue 的框架。所以你需要独立安装，nuxt包含文件结构，使用Vue非常容易。