請求的模塊不提供名為 vuejs 3 的導出

Question

我嘗試使用export default和export default legend但它仍然出錯

The requested module '/src/legends.js?t=1637071' does not provide an export named 'legend'

在控制台日志中，我該如何解決這個問題？

謝謝！！

傳說.js

import axios from "axios";
const API_URL = "http://localhost:8000/api";
function add(url, type) {
  axios
    .post(`${API_URL}/${url}`, this.newRole)
    .then((res) => {})
    .catch((error) => {
      console.log("ERRRR:: ", error.response.data);
    });
}
function remove(url, type) {
  axios
    .post(`${API_URL}/${url}`, this.newRole)
    .then((res) => {})
    .catch((error) => {
      console.log("ERRRR:: ", error.response.data);
    });
}
export default legend

管理角色.vue

<template>
  <div class="col-md-12">
    <div class="card">
      <div class="card-header d-flex flex-row">
        <h4 class="card-title align-self-center">Roles Manager</h4>
        <button
          class="btn btn-success btn-fab btn-icon btn-round mb-3 ml-2"
          data-toggle="modal"
          data-target="#addRoleModal">
          <i class="icon-simple-add"></i>
        </button>
      </div>
      <div class="card-body">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>#</th>
              <th>Role Name</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="role in roles" :key="role.id">
              <td>
                {{ role.id }}
              </td>
              <td>
                {{ role.name }}
              </td>
              <Buttons />
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- MODALS -->
  <!-- ADD NEW ROLE MODAL -->
  <div
    class="modal modal-black fade" id="addRoleModal"
    tabindex="-1" role="dialog" aria-labelledby="addRoleModal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Add new role</h4>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            <i class="icon-simple-remove"></i>
          </button>
        </div>
        <form class="form-horizontal">
          <div class="modal-body">
            <div class="d-flex flex-row">
              <label class="col-md-4 col-form-label">Role name</label>
              <div class="col-md-6">
                <div class="form-group">
                  <input type="name" name="name" class="form-control"
                    v-model="newRole.name" />
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">
              Cancel
            </button>
            <button type="submit" class="btn btn-primary" @click.stop.prevent="addRole()">
              Add new role
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- END ADD NEW ROLE MODAL -->

  <!-- REMOVE ROLE MODAL -->
  <div class="modal modal-black fade" id="roleRemoveModal"
    tabindex="-1" role="dialog" aria-labelledby="roleRemoveModal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="roleRemoveModal">
            Confirm delete role 
            <strong class="text-primary">
              {{ roleInfo.name }}
            </strong>
          </h4>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            <i class="icon-simple-remove"></i>
          </button>
        </div>
        <div class="modal-body h4 text-white text-center mt-4">
          Really want to delete role 
          <strong class="text-danger">
            {{ roleInfo.name }}
          </strong>?
        </div>
        <div class="modal-footer d-flex flex-row">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            Cancel
          </button>
          <button type="button" class="btn btn-danger" data-dismiss="modal" @click="removeRole()">
            Delete role
          </button>
        </div>
      </div>
    </div>
  </div>
  <!-- END REMOVE ROLE MODAL -->
  <!-- END MODALS -->
</template>

<script>
import Buttons from "../components/cores/Buttons.vue";
import { legend } from "/src/legends.js";

export default {
  name: "manageRoles",
  components: { Buttons },
  data() {
    return {
      roles: [],
      newRole: {
        name: null,
      },
      roleInfo: {
        id: 0,
        name: "",
      },
    };
  },
  methods: {
    addRole() {
      legend.add(`roles/createRole`);
      this.$router.push("/manager/roles");
    },
    removeRole() {
      legend.remove(`roles/createRole`);
      this.$router.push("/manager/roles");
    },
  },
  mounted() {
    this.refreshRoles();
  },
};
</script>

Answer 1

export default就是默認導出，顧名思義。 無論保存默認導出值的變量如何調用，它都應該作為默認導入導入，而不是帶括號的命名導入：

const legend = ...;
export default legend;

和

import legendCanBeImportedUnderAnyName from "/src/legends.js"

或者，它可以被命名為導出，它也需要像這樣導入：

export const legend = ...;

和

import { legend } from "/src/legends.js"

Answer 2

嘗試這個。 import * as legend from "/src/legends.js";