1、创建项目

在 WSL 中用 npm 创建 vue 项目。

（不用 pnpm 是因为：用 WSL 的 pnpm 安装 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、打开项目

用 PhpStorm/WebStorm 打开 WSL 项目。

3、配置 Node.js 和 npm

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

4、运行开发环境

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

Chrome 不能单独设置代理而是用系统代理，据说 Windows 系统设置的代理是 socks4 代理，开系统代理后，用 Chrome 打不开 Google，Chrome 登录不了 Google 账号。

开系统设置代理后，虽然打不开 gooogle.com，但是可以打开这个 chrome 应用商店：

1

https://chrome.google.com/webstore/category/extensions

这样我们就可以先安装 Chrome 代理插件，再在 Chrome 彩礼插件中设置 socks 5 代理。

我装了 FoxyProxy Standard 代理，可行。

如果只需要上网，可以用 Firefox，它有设置代理的地方。
如果只是为了使用 Chrome 扩展，可以用 Edge，Edge 使用和 Chrome 一样的内核，可以从 Chrome 官网安装插件，也可以从 Edge 官网安装插件。

WSL 跨文件操作性能比较差，WSL Debian PHP 解释器执行 Windows 上的代码速度会很慢，因此 PHP 项目代码要保存在 WSL Debian 中。

1、打开项目文件夹

点击 PHPStorm 的 文件 > 打开，选择 \wsl$\Debian 目录，找到 WSL Debian 系统上的项目文件夹，这样就可以打开 WSL Debian 上的项目文件夹了。

2、WSL Debian 安装 PHP

1
2
3
4

sudo apt update
sudo apt install php php-dev php-gd php-curl php-mysql \
php-mbstring php-redis php-xdebug php-intl php-zip \
composer

用 WSL Debian 12 安装 php 做开发，apt 的 PHP 版本足够新，安装非常方便。
如果 Debian 版本比较老，建议参考这里通过源码编译安装PHP。

1
2

sudo apt install php php-dev php-gd php-curl php-mysql \
php-mbstring php-redis php-xdebug php-intl php-zip

安装 swoole

1

sudo pecl install swoole

修改配置

1

sudo vim /etc/php/8.2/cli/php.ini

加入：

1

extension=swoole.so

在开发环境完全可以用 MariaDB 代替 MySQL，而且安装更方便。

1
2
3
4
5
6
7
8
9
10
11

# 更新索引包
sudo apt update
# 安装 MariaDB 软件包
sudo apt install mariadb-server
# 配置 MariaDB
sudo mysql_secure_installation
# 启动服务
sudo service mariadb start

# 查看服务状态
sudo service --status-all

服务状态显示例如：

1
2
3
4
5
6
7
8
9

[ + ]  cron
[ - ]  hwclock.sh
[ + ]  kmod
[ + ]  mariadb
[ + ]  networking
[ + ]  procps
[ - ]  rsync
[ - ]  sudo
[ + ]  udev

• [ + ] 为已启动
• [ - ] 为未启动

配置文件位置：

1

/etc/mysql/debian.cnf

迁移 wsl 系统的文件位置的方法是：导出再导入。我这里操作的发行版是 Debian，你根据需要更换就可以，如 Ubuntu。

1、停止 wsl 运行的虚拟机

1
2
3
4
5

# 停止全部虚拟机
wsl --shutdown

# 只停止 Debian
wsl -t Debian

2、导出

导入导出有两种模式，一种是导出 tar 文件，再把 tar 文件导入到指定的文件夹，生成新的虚拟硬盘；另一种是导出 vhdx （虚拟硬盘）文件，再把虚拟硬盘导入，继续使用该虚拟硬盘。我们用第二种方法操作。

1

wsl --export Debian D:\WSL\Debian-12-ext4.vhdx --vhd

也可以直接把 C:\Users\[user]\AppData\Local\Packages\[distro]\LocalState\[distroPackageName]\ext4.vhdx 复制到指定位置再导入。

3、卸载掉要迁移的发行版

1

wsl --unregister Debian

4、导入

1

wsl --import-in-place Debian D:\WSL\Debian-12-ext4.vhdx

5、设置默认用户

如果不设置，默认将用 root 用户登录。

1

Debian config --default-user <username>

Debian 官方源网速太慢，换成国内源必不可少。

1、安装 apt https 支持

1

sudo apt install apt-transport-https ca-certificates

2、修改源

先备份 /etc/apt/sources.list，然后把其内容替换为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释
deb https://mirrors.tuna.tsinghua.edu.cn/debian/ bookworm main contrib non-free non-free-firmware
deb-src https://mirrors.tuna.tsinghua.edu.cn/debian/ bookworm main contrib non-free non-free-firmware

deb https://mirrors.tuna.tsinghua.edu.cn/debian/ bookworm-updates main contrib non-free non-free-firmware
deb-src https://mirrors.tuna.tsinghua.edu.cn/debian/ bookworm-updates main contrib non-free non-free-firmware

deb https://mirrors.tuna.tsinghua.edu.cn/debian/ bookworm-backports main contrib non-free non-free-firmware
deb-src https://mirrors.tuna.tsinghua.edu.cn/debian/ bookworm-backports main contrib non-free non-free-firmware

# deb https://mirrors.tuna.tsinghua.edu.cn/debian-security bookworm-security main contrib non-free non-free-firmware
# deb-src https://mirrors.tuna.tsinghua.edu.cn/debian-security bookworm-security main contrib non-free non-free-firmware

deb https://security.debian.org/debian-security bookworm-security main contrib non-free non-free-firmware
deb-src https://security.debian.org/debian-security bookworm-security main contrib non-free non-free-firmware

备注

• 清华 Debian 软件仓库镜像使用帮助
• 查看镜像同步时间

一、减少索引耗时

PHPStorm 不索引被排除的目录。在项目文件/文件夹上右键可排除、取消排除目录，更方便的是在 Settings > Directories 可查看和管理以标记的目录。

两个索引大户是 vendor 和 node_modules 目录。

添加 php 库

把 vendor 目录排除，再到 Setting > PHP 把需要用到的包目录加入到 Include path。

有时候把 Setting > PHP > Include path 的很多 vendor 中的目录去掉后，重启 PHPStorm 又自己加进去了。
解决：Setting > PHP > composer 设置的 作为库添加软件包 前的勾去掉。

node_modules

PHPStorm 默认已经把 node_modules 排除掉，在 Settings > Languages & Frameworks > JavaScript > Libraries 中自动把 package.json 中依赖的库加入到名为 ${project-name}/node_modules 的库。

我们可以用 pnpm 代替 npm 管理包来减少 IDE 的卡顿。pnpm 极大优化性能，速度更快、占空间更少。pnpm 管理的 node_modules 使用树状结构而不是扁平结构，IDE 打开 node_modules 目录不卡。

Laravel 排除目录

Laravel 项目还可以把 public、storage 目录排除。

二、加大允许使用内存

可在 help > 更改内存设置 修改最大堆大小，也可在 help > Edit Custom VM Options 中设置如 -Xmx2048m。

三、可去掉一些平时用不到的插件

四、不建议的优化

禁掉一些很好用的功能达到提速的目的是来搞笑的。如有人建议禁掉 Language injection 插件，完全禁掉这个插件是不可取的，可以到 Settings > Editor > Language Injections 把一些用不到的插入语言去掉。

在 Vite 中用 manualChunks 分割打包时，找文件依赖很麻烦，用 rollup-plugin-visualizer 可以帮我们找出依赖关系、分析依赖包的大小。

安装插件 rollup-plugin-visualizer

pnpm i -D rollup-plugin-visualizer

使用插件

在 vite.config.js 中添加：

1
2
3
4
5

import { visualizer } from 'rollup-plugin-visualizer';

plugins:[
     visualizer({ open: true }) // 使用依赖分析，open: true 开启编译完成后自动弹出分析结果 html 页面
]

分析结果

执行 pnpm build，编译完成后，会在浏览器中自动打开下面的页面：

问题复现

开发 SPA 应用用到 ElementPlus，官方推荐用 自动导入 方式来引用。

如果你用笔记本开发，那么预览时 js 的加载速度会极慢，node 占 CPU 超过100%，非常影响开发体验，恨不得换到 MPA 模式开发。

原因

因为自动自动导入方式预览时，要加载一百多个js文件。如果你用的是强劲的台式机，用这个方式没发现有明细的卡。笔记本 CPU 顶不住。

解决办法

用 完整引入 或 按需导入 就没这个问题。

建议使用 完整引入 方式，ElementPlus 相关 js 就只引入了一个 /node_modules/.vite/deps/element-plus.js，而不是自动导入的上百的js文件。

编译后 element-plus 后的 js gz 后需要多传输 100k 左右，如果你受不了，可以另外加一个自动加载的 vite 配置，在增加一个创建不用全局引入 ElementPlus 的入口文件给 vite 引用。

如：build 时使用 vite.build.js 配置，在 vite.build.js 中引用使用 自动导入 的js入口文件。再把 package.json 的 scripts.build 改为 vite build --config vite.build.js，这样就可以实现 dev 时使用完整引入ElementPlus，build 时使用自动导入减少编译文件的大小。