5

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

有什么我可以解决的吗?

4

3 回答 3

8

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使用以下内容创建:

    import { createRouter, createWebHistory } from 'vue-router'
    import HelloWorld from './components/HelloWorld.vue'
    
    export default createRouter({
      history: createWebHistory(),
      routes: [
        {
          path: '/',
          component: HelloWorld,
        }
      ]
    })
    
  3. 编辑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')
    
  4. 编辑src/App.vue以包含:

    <template>
      <router-view />
    </template>
    
于 2021-05-22T22:24:03.203 回答
7

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

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

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

然后是 Vue 路由器。

vue add router

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

于 2021-07-29T23:18:05.387 回答
0

我已按照上述步骤操作,它对我有用

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

npm 修复审计

然后使用命令添加路由器

vue添加路由器

于 2022-02-03T00:00:22.097 回答