vue.js - 错误 : Cannot find module '@vue/cli-service/generator/template/src/App.vue' with vite

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 命令来自动增加你的项目文件来设置 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>