错误：无法使用 vite 找到模块“@vue/cli-service/generator/template/src/App.vue”

Question

我用 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)

我能做些什么来解决它吗？

Answer 1

该vue命令来自 Vue CLI。尽管项目结构相似，但Vue CLI 命令（即vue add router）不适用于 Vite 项目。目前没有官方的 Vite CLI 命令可以自动将您的项目文件添加到 setup vue-router，因此您必须手动执行此操作：

1. 从项目根目录运行此命令进行安装vue-router（Vue 3 的版本为 4x）：

   npm i -S vue-router@4
   # or:
   yarn add vue-router@4
   

2. src/router.js使用以下内容创建：

   npm i -S vue-router@4
   # or:
   yarn add vue-router@4
   

3. 编辑src/main.js以安装路由器实例：

   import { createRouter, createWebHistory } from 'vue-router'
   import HelloWorld from './components/HelloWorld.vue'
   
   export default createRouter({
     history: createWebHistory(),
     routes: [
       {
         path: '/',
         component: HelloWorld,
       }
     ]
   })
   

4. 编辑src/App.vue以包含：

   import { createApp } from 'vue'
   import App from './App.vue'
   import './index.css'
   import router from './router' 
   
   createApp(App)
     .use(router) 
     .mount('#app')
   

Answer 2

我不知道这是否有帮助，但至少对我有用。

首先我安装了@vue/cli-service

npm install --save-dev @vue/cli-service

然后是 Vue 路由器。

vue add router

让我知道这是否适合您！祝你今天过得愉快！