如何在WebStorm中配置Vue项目运行环境

梦婷姑娘_8283

梦婷姑娘_8283

2026-10-23

514人浏览

原创

webstorm 需手动配置 npm 运行脚本才能启动 vue 项目;vite 是 vue3 默认工具,端口为5173,需在 ide 中创建 npm 配置(name: dev, command: run, script: dev),并启用 source map 调试。

如何在webstorm中配置vue项目运行环境

WebStorm 本身不自动运行 Vue 项目,必须手动配置 npm 运行脚本,否则点击绿色三角形毫无反应。

确认项目用的是 Vite 还是 Vue CLI

Vue 官方已将 vite 设为 Vue3 默认构建工具;vue-cli-service 是 Webpack 封装,启动慢、热更新卡顿、TS 类型推导弱。打开 package.json 查看 scripts 字段:

  • 如果含 "dev": "vite" 或 "serve": "vite" → 用 Vite 流程
  • 如果含 "serve": "vue-cli-service serve" → 用 Vue CLI 流程(不推荐新项目)

Vite 项目默认端口是 http://localhost:5173,不是旧版的 :8080;CLI 项目才是 :8080。

手动添加 npm 运行配置(关键一步)

WebStorm 不会自动识别 package.json 中的脚本,必须显式创建运行配置:

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.2万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习