Error: Cannot find module '@vue/cli-service/generator/template/src/App.vue' with vite
Error: Cannot find module '@vue/cli-service/generator/template/src/App.vue' with vite
我用 vite 创建了一个 vue 3 项目,我想将 vue-router 添加到项目中,所以我在终端上写了 vue add router
但是在下载所有内容后我收到以下错误:
Error: Cannot find module '@vue/cli-service/generator/template/src/App.vue' from '/home/frostri/projects/onedrive_local/client/node_modules/@vue/cli-plugin-router/generator/template/src'
at Function.resolveSync [as sync] (/usr/lib/node_modules/@vue/cli/node_modules/resolve/lib/sync.js:102:15)
at renderFile (/usr/lib/node_modules/@vue/cli/lib/GeneratorAPI.js:515:17)
at /usr/lib/node_modules/@vue/cli/lib/GeneratorAPI.js:300:27
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Generator.resolveFiles (/usr/lib/node_modules/@vue/cli/lib/Generator.js:268:7)
at async Generator.generate (/usr/lib/node_modules/@vue/cli/lib/Generator.js:175:5)
at async runGenerator (/usr/lib/node_modules/@vue/cli/lib/invoke.js:111:3)
at async invoke (/usr/lib/node_modules/@vue/cli/lib/invoke.js:92:3)
有什么办法可以解决吗?
vue
命令来自 Vue CLI。尽管项目结构相似,但 Vue CLI 命令(即 vue add router
)不适用于 Vite 项目。目前没有官方的 Vite CLI 命令自动扩充你的项目文件以进行设置vue-router
,所以你必须手动完成:
运行 从项目根目录安装此命令 vue-router
(Vue 3 版本 4x):
npm i -S vue-router@4
# or:
yarn add vue-router@4
使用以下内容创建 src/router.js
:
import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
export default createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
component: HelloWorld,
}
]
})
编辑src/main.js
以安装路由器实例:
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router'
createApp(App)
.use(router)
.mount('#app')
编辑 src/App.vue
以包含:
<template>
<router-view />
</template>
我不知道这是否有帮助,但至少对我有用。
首先我安装了@vue/cli-service
npm install --save-dev @vue/cli-service
然后是 Vue 路由器。
vue add router
让我知道这是否适合您!祝你有美好的一天!
我已经按照上面的步骤做了,对我有用
sudo npm install --save-dev @vue/cli-service
npm fix audit
然后使用命令添加路由器
vue add router
我用 vite 创建了一个 vue 3 项目,我想将 vue-router 添加到项目中,所以我在终端上写了 vue add router
但是在下载所有内容后我收到以下错误:
Error: Cannot find module '@vue/cli-service/generator/template/src/App.vue' from '/home/frostri/projects/onedrive_local/client/node_modules/@vue/cli-plugin-router/generator/template/src'
at Function.resolveSync [as sync] (/usr/lib/node_modules/@vue/cli/node_modules/resolve/lib/sync.js:102:15)
at renderFile (/usr/lib/node_modules/@vue/cli/lib/GeneratorAPI.js:515:17)
at /usr/lib/node_modules/@vue/cli/lib/GeneratorAPI.js:300:27
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Generator.resolveFiles (/usr/lib/node_modules/@vue/cli/lib/Generator.js:268:7)
at async Generator.generate (/usr/lib/node_modules/@vue/cli/lib/Generator.js:175:5)
at async runGenerator (/usr/lib/node_modules/@vue/cli/lib/invoke.js:111:3)
at async invoke (/usr/lib/node_modules/@vue/cli/lib/invoke.js:92:3)
有什么办法可以解决吗?
vue
命令来自 Vue CLI。尽管项目结构相似,但 Vue CLI 命令(即 vue add router
)不适用于 Vite 项目。目前没有官方的 Vite CLI 命令自动扩充你的项目文件以进行设置vue-router
,所以你必须手动完成:
运行 从项目根目录安装此命令
vue-router
(Vue 3 版本 4x):npm i -S vue-router@4 # or: yarn add vue-router@4
使用以下内容创建
src/router.js
:import { createRouter, createWebHistory } from 'vue-router' import HelloWorld from './components/HelloWorld.vue' export default createRouter({ history: createWebHistory(), routes: [ { path: '/', component: HelloWorld, } ] })
编辑
src/main.js
以安装路由器实例:import { createApp } from 'vue' import App from './App.vue' import './index.css' import router from './router' createApp(App) .use(router) .mount('#app')
编辑
src/App.vue
以包含:<template> <router-view /> </template>
我不知道这是否有帮助,但至少对我有用。
首先我安装了@vue/cli-service
npm install --save-dev @vue/cli-service
然后是 Vue 路由器。
vue add router
让我知道这是否适合您!祝你有美好的一天!
我已经按照上面的步骤做了,对我有用
sudo npm install --save-dev @vue/cli-service
npm fix audit
然后使用命令添加路由器
vue add router