vue.js - 错误:无法使用 vite 找到模块 '@vue/cli-service/generator/template/src/App.vue'
问题描述
我用 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 命令可以自动将您的项目文件扩充到 setup 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>
推荐阅读
- android - Firebase 不会将 OTP 身份验证代码发送到电话号码
- php - 基于位置更新子字符串的 PDO 准备语句
- javascript - 与 Firebase 数据中的键相比,Object.keys 导致顺序不一致/不同
- r - 使用 Alpha Vantage 插件时在 tidyquant (R) 中指定日期
- java - 是否可以显式使用 Java 内部锁?
- node.js - Noto 字体无法使用 Vue 处理 jsPDF
- streaming - python Dataflow DoFn生命周期中的光束设置()刷新多长时间?
- mysql - 如何确定其安全退出节点应用程序
- javascript - 如何手动创建 http.IncomingMessage 流?
- javascript - 使用 AJAX 表单时如何让 Chrome 将用户的输入保存到他们的自动完成历史记录中