'не предоставляет экспорт с именем' createRouter '' vue 3, vite и vue-router

Question

Я только начал использовать vite с vue. Когда я пытаюсь использовать vue-router, я получаю сообщение об ошибке:

      SyntaxError: The requested module '/node_modules/.vite/vue-router/dist/vue-router.esm.js?v=4830dca4' does not provide an export named 'createRouter

Мой router / index.js выглядит так:

      import {
 createWebHistory,
 createRouter
} from "vue-router";

import Services from "../views/Services.vue";
import Costumers from "../views/Costumers.vue";

const history = createWebHistory();
const routes = [
  {
    path: "/",
    component: Services
  },
  {
    path: "/costumers",
    component: Costumers
  },
];
const router = createRouter({
  history,
  routes
});
export default router;

Мой main.js выглядит так:

      import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router'

createApp(App).use(router).mount('#app')

Мой package.json выглядит так:

      {
 "name": "frontend",
 "version": "0.0.0",
 "scripts": {
 "dev": "vite",
 "build": "vite build"
},
 "dependencies": {
 "vue": "^3.0.5",
 "vue-router": "^3.4.9"
},
 "devDependencies": {
 "@vitejs/plugin-vue": "^1.0.4",
 "@vue/compiler-sfc": "^3.0.5",
 "autoprefixer": "^10.2.3",
 "postcss": "^8.2.4",
 "tailwindcss": "^2.0.2",
 "vite": "^2.0.0-beta.12"
 }
}

Кто-нибудь знает, как экспортировать маршрут?

Answer 1

Вам следует удалить текущий модуль vue-router и переустановить последний (версия 4), совместимый с Vue 3, запустив:

      npm uninstall vue-router

тогда

      npm install vue-router@next -S 

Answer 2

если вы проверите внутри файла '/node_modules/.vite/vue-router/dist/vue-router.esm.js?v=4830dca4'

здесь нет export defaultсинтаксис. только по имени export {}

поэтому вместо импорта по умолчанию используйте именованный импорт.

      // don't
import VueRouter from 'vue-router'

// do
import { createRouter, createWebHashHistory } from 'vue-router'

Answer 3

Как бы то ни было, я столкнулся с этой же проблемой при использовании vue-router@4. Я использовал пряжу вместо npm. При переходе на npm проблема была решена. Я не уверен, была ли проблема в пряжи или все, что требовалось - это новая установка.

Answer 4

если вы обновите vue-router с v3.x на v4.x в рамках вашего проекта vite ， пожалуйста, очистите кеш deps

vite --force

официальные документы: https://vitejs.dev/guide/dep-pre-bundling.html#caching

Answer 5

Не импортируйте так в vue3 , это не сработает

      import VueRouter from 'vue-router';

Импорт Вот так это будет работать

      import * as VueRouter from 'vue-router';

или Импортировать конкретные Затем сделайте так

      import { createRouter, createWebHashHistory } from 'vue-router'

Answer 6

Существует простое решение, если экспортируемый модуль фактически экспортирует только методы, но вы все равно хотите импортировать их все как объект.

      // if this does not work
import VueRouter from 'vue-router'

// try this
import * as VueRouter from 'vue-router';

Обычно это происходит, когда вы импортируете скомпилированный JS в TS. То же решение работает сunderscoreилиlodash

Answer 7

Попробуйте закрыть приложение, чем открыть его снова, я исправил эту проблему