'不提供名为 'createRouter' 的导出'vue 3、vite 和 vue-router
'does not provide an export named 'createRouter'' vue 3, vite and vue-router
我刚开始使用 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 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"
}
}
有人知道如何导出路由吗?
您应该卸载当前的 vue-router 模块并重新安装与 Vue 3 兼容的最新(版本 4)运行 :
npm uninstall vue-router
然后
npm install vue-router@next -S
我 运行 在使用 vue-router@4 时遇到了同样的问题。我使用的是 yarn 而不是 npm。切换到 npm 解决了这个问题。我不确定问题是出在 yarn 上还是只需要全新安装。
如果你在你的vite项目下更新vue-router
从v3.x到v4.x,请清除deps缓存
vite --force
尝试关闭您的应用,然后重新打开,我已解决此问题
如果你查看文件内部 '/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'
我刚开始使用 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 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"
}
}
有人知道如何导出路由吗?
您应该卸载当前的 vue-router 模块并重新安装与 Vue 3 兼容的最新(版本 4)运行 :
npm uninstall vue-router
然后
npm install vue-router@next -S
我 运行 在使用 vue-router@4 时遇到了同样的问题。我使用的是 yarn 而不是 npm。切换到 npm 解决了这个问题。我不确定问题是出在 yarn 上还是只需要全新安装。
如果你在你的vite项目下更新vue-router
从v3.x到v4.x,请清除deps缓存
vite --force
尝试关闭您的应用,然后重新打开,我已解决此问题
如果你查看文件内部 '/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'