关于vite+vue3项目无法启动问题 failed to load config from C:\Users\myname123\Desktop\xxxxx\vite.config.ts

最新推荐文章于 2025-03-22 09:44:27 发布
最新推荐文章于 2025-03-22 09:44:27 发布
阅读量4.4k 收藏 2
点赞数
文章标签： vue.js 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68630350/article/details/133696930
版权
文章讲述了在遇到Node.js启动错误后，如何通过使用NodeVersionManager(nvm)来解决，包括检查当前版本、查看可用版本、安装特定版本和切换至高版本的过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

启动报错如上图，经过排查node版本过低 建议安装16+版本

安装了nvm方便切换node版本

参见此博主方法nvm介绍、nvm下载安装及使用_前端菜鸡小卒的博客-CSDN博客

使用到一些常用指令：nvm -v 查看当前nvm版本号                                    

                                     nvm list available  查看所有可供安装的node版本

                                     nvm install 16.17.1  安装指定node版本

                                     nvm ls  查看当前已安装的所有node版本   

                                     nvm use 16.17.1 切换到指定的node版本

安装好之后切换到高版本就可以正常启动。

                                        

小梨c
关注
如何创建一个vite+vue3+ts项目（小白必看）
蜗牛~~
06-15 2586
当修改代码时，HMR 能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作。在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的。（2）写好页面之后，我们来创建路由，在 src 路径下新建 router/index.ts。
Vite 3.x + Vue 3.x + TypeScript 4.x + Element Plus + Pinia 搭建项目
lhz_333的博客
08-17 1767
学习如逆水行舟，不进则退。
运行安装vue3+vite+Ts项目报错，无法加载vite.config.ts文件（failed to load config from D:\XXX\vite.config.ts）
weixin_48117629的博客
03-07 3239
git 上面拉别人的vue3+vite+Ts项目，安装依赖成功之后运行，出现报错。
failed to load config from D\...\...vite.config.js错误
m0_47814717的博客
09-13 1万+
出现 failed to load config from D\...\...vite.config.js 错误，通常意味着 Vite 无法正确加载配置文件。这可能是由于配置文件的路径、语法错误或依赖项缺失导致的问题
vue3运行项目出错 failed to load config from D:\xm\demo\vite.config.ts
最新发布
qq_45527370的博客
03-22 782
vue3运行项目出错 failed to load config from D:\xm\demo\vite.config.ts error when starting dev server:
HBuilder创建uniapp,Vue3项目版本报错failed to load config from E:\Hbuilder\HBuilderX\plugins\uniapp-cli-vite\
m0_60474123的博客
04-13 1003
HBuilder创建uniapp,Vue3项目版本报错报错信息：failed to load config from E:\Hbuilder\HBuilderX\plugins\uniapp-cli-vite\vite.config.js 16:30:52.972 error when starting dev server: 16:30:52.983 TypeError: uni is not a function
【Error】failed to load config from D:\Users\MXIN\IdeaProjects\xxx\vite.config.ts error when starting
m0_64210833的博客
12-14 4261
确保 Vite 已安装： 确保你的项目中已经安装了 Vite，并且版本是兼容的。在项目根目录下执行以下命令安装 Vite
vue3+vite项目，安装依赖运行报错“failed to load config from xxx，TypeError: vite.createFilter is not a function”
m0_52900946的博客
08-07 3万+
今天从GitHub上拉下来了一个vue3+vite项目，之前就是安装依赖就可以运行了，但是今天一直报错，显示...
解决报错：failed to load config from /Users/stephen/code/my-vue3-project/vite.config.js
qq_38969618的博客
05-23 6553
pnpm add @esbuild/darwin-x64@0.16.17 -D
vite+vue3运行项目报错failed to load config from ../vite.config.ts / Cannot find module ‘node:path‘
热门推荐
weixin_55088768的博客
12-13 4万+
vite+vue3运行项目报错failed to load config from ../vite.config.ts / Cannot find module 'node:path'
Electron+Vite+Vue3+Ts项目搭建
qq_24724153的博客
02-17 681
根据自己习惯选择TypeScript 或 JavaScript 教程默认选择TypeScript。显示这样 vue 项目搭建完成了，打开vscode或者webstrom 进行以下命令。my-element-plus-app 自定义项目名称。页面展示这样 Vite+Vue3+Ts 安装完成了。再package.json 文件添加以下。如出现以下错误，请关闭相关杀毒软件。展示选择的源代表切换成功。显示以上图片代表已安装成功。或直接执行命令也是可以的。
搭建vue3+vite+pinia项目步骤
小破孩的博客
07-04 1738
搭建 vue3+vite+pinia 项目超详细步骤
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件，手动配置 vite.config.ts 和 manifest.json 文件
guoqkmiss的博客
03-29 2592
使用 crxjs vite vue 开发 Chrome 多页面插件
bug：failed to load config from D:\work\xxxxxxxxx\vite.config.ts SyntaxError: Unexpected token ‘.‘
奶绿走糖的博客
05-29 1599
我使用的是node12.21.0，版本太低，node无法识别此语法。检查node版本，将node版本升级到16+。
解决：uniapp项目打包微信小程序或原生app包（wgt），报错：failed to load config from /xx/xx-mall/vite.config.ts
qq_38969618的博客
11-30 2939
使用高版本node如v18.15.0
vite项目在jenkins自动打包报错：failed to load config from ../vite.config.js You installed esbuild on
清风明月的博客
04-11 2万+
vite项目在jenkins自动打包报错找不到esbuild-linux-64 在window环境开发用的找不到esbuild-windows-64，在linux环境构建需要使用esbuild-linux-64，找不到esbuild-linux-64就会报错 实际报错： error during build: 11:21:11 Error: 11:21:11 You installed esbuild on another platform than the one you're currently us
解决‘vite‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。以及failed to load config from vite.config.js。
YesAnna_的博客
09-13 758
我尝试使用pnpm install安装所有依赖，成功解决，不确定是否具有关联性，总之可以试试。原因很显然是因为缺少vite可执行文件。
新建一个项目 使用vite+vue3+vue router +js+ant1.x
11-08
创建一个基于Vite、Vue 3、Vue Router 4和Ant Design 1.x的新项目，可以按照以下步骤操作： 1. **安装依赖** 使用`npm`或`yarn`初始化项目并安装所需的库： ```bash npm init vite-app my-project // 或者 yarn create vite my-project ``` 安装Vue Router 4、Ant Design和其他必要的库： ```bash npm install @vue/router antd axios typescript vite-plugin-vue3 vite-plugin-terser ``` 2. **配置文件** 更新`vite.config.ts`以支持Vue 3、TypeScript以及路由配置： ```typescript import { defineConfig } from &#39;vite&#39;; import vue from &#39;@vitejs/plugin-vue&#39;; import { createRouter, createWebHistory } from &#39;vue-router&#39;; import Antd from &#39;vite-plugin-antd&#39;; export default defineConfig({ plugins: [ vue(), Antd({ locale: { messages: { zhCN: require(&#39;./locales/zh-CN.json&#39;), }, }, }), ], server: { port: 3000, }, build: { outDir: &#39;./dist&#39;, }, router: () => createRouter({ history: createWebHistory(process.env.BASE_URL), routes: [], // 这里添加你的路由配置 }), }); ``` 3. **路由配置** 在项目的`src/router/index.ts`或相应的路由文件中，定义你的路由： ```typescript import { createRouteMeta, RouteRecordRaw } from &#39;vue-router&#39;; const routes: Array<RouteRecordRaw> = [ { path: &#39;/&#39;, name: &#39;Home&#39;, component: () => import(&#39;./views/Home.vue&#39;), meta: createRouteMeta({ title: &#39;首页&#39; }), }, // 添加其他页面... ]; export default routes; ``` 4. **组件导入与使用** 在视图文件（如`src/views/Home.vue`）中引入Ant Design组件并使用它们： ```html <template> <a-layout> <a-menu :default-active-key="[&#39;1&#39;]"> <!-- 导航菜单 --> </a-menu> <router-view /> </a-layout> </template> <script setup lang="ts"> import { useRouter } from &#39;vue-router&#39;; const router = useRouter(); onMounted(() => { router.push(&#39;/your-target-route&#39;); }); </script> ``` 5. **启动项目** 在项目根目录运行`npm run serve`或`yarn dev`来启动Vite服务器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值