PhpStorm / WebStorm WSL 前端开发环境配置

1、创建项目

WSL 中用 npm 创建 vue 项目。

(不用 pnpm 是因为:用 WSLpnpm 安装 node 包后,Windows 下的 PhpStorm 2023.2.1 识别不出,希望官方能早点解决。)

1
2
3
npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm i

2、打开项目

wsl 前端开发

用 PhpStorm/WebStorm 打开 WSL 项目。

3、配置 Node.js 和 npm

wsl 前端开发

打开 Node.js 和 npm 配置,解释器选择 WSL 上的 Debian /usr/bin/node,包管理器选择 WSL 上的 npm

4、运行开发环境

wsl 前端开发

打开 PhpStorm 的终端窗口,终端自动进入 WSL 上的项目文件夹,输入 npm run dev 启动开发服务器,支持热加载。用浏览器打开 http://localhost:5173/ 浏览页面,编辑 src/components/HelloWorld.vue 文件,不需要刷新就能看到页面热更新。

PhpStorm / WebStorm WSL 前端开发环境配置

https://coderpan.com/tools/phpstorm-wsl-dev-env.html

作者

CoderPan

发布于

2023-09-07

更新于

2024-03-01

许可协议

评论