未捕獲的語法錯誤：請求的模塊“/node_modules/.vite/vue.js?v=535663ae”不提供名為“default”的導出

Question

我正在使用稱為Griptape （用於區塊鏈）的 js 框架。 嘗試使用 vue 路由器時出現此錯誤。

import Vue from "vue"; //Error **does not provide an export named 'default'**
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

 const router = new VueRouter({
  routes,
});
export default router;

而我的vue.d.ts文件看起來像這樣

import { CompilerOptions } from '@vue/compiler-dom';
import { RenderFunction } from '@vue/runtime-dom';

export declare function compile(template: string | HTMLElement, options?: CompilerOptions): RenderFunction;

export * from "@vue/runtime-dom";

export { }

router.d.ts文件看起來像這樣

Answer 1

我認為您正在使用Vue 3 。 你應該檢查你的vue-router版本。 如果你現在只運行npm i vue-router ，版本應該是“^3.5.3”。 嘗試使用npm i vue-router@next安裝更新版本。

Answer 2

從技術上講，您沒有提出問題，我將嘗試解釋錯誤。 您的錯誤說明了您嘗試執行的操作，即從不存在的模塊“vue”中導入默認導出。

// some ts file
import Vue from "vue";

// the module
export default {}

如果應該有一個名為 'Vue' 的命名導出，您應該將其編寫如下： import { Vue } from 'vue'

參考：

• https://www.typescriptlang.org/docs/handbook/modules.html#default-exports