11

我刚开始在 vue 中使用 vite。

当我尝试使用 vue-router 时，出现错误：

SyntaxError：请求的模块“/node_modules/.vite/vue-router/dist/vue-router.esm.js?v=4830dca4”不提供名为“createRouter”的导出

我的 router/index.js 看起来像这样：

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

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

const history = createWebHistory();
const routes = [
  {
    path: "/",
    component: Services
  },
  {
    path: "/customers",
    component: Customers
  },
];
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"
 }
}

有人知道如何导出路线吗？

4

5 回答 5

17

您应该卸载当前的 vue-router 模块并通过运行重新安装与 Vue 3 兼容的最新（版本 4）模块：

npm uninstall vue-router

然后

npm install vue-router@next -S
于 2021-01-23T12:05:49.943 回答
4

我在使用 vue-router@4 时遇到了同样的问题。我使用的是纱线而不是 npm。切换到 npm 解决了这个问题。我不确定问题是纱线还是只需要全新安装。

于 2021-02-26T12:19:24.933 回答
4

如果您检查文件内部'/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'
于 2021-11-20T13:50:40.827 回答
3

如果你vue-router在 vite 项目下从 v3.x 更新到 v4.x，请清除 deps 缓存

vite --force

官方文档：https ://vitejs.dev/guide/dep-pre-bundling.html#caching

于 2021-03-08T15:48:00.670 回答
0

尝试关闭您的应用程序而不是重新打开，我解决了这个问题

于 2021-08-17T05:14:45.580 回答