vue框架在WSL2环境下无法 热更新 Hot Module Replacement（简称 HMR）

问题

vue，在WSL2环境下无法热更新，保存后，系统没有检测到更新，网页中的页面没有变化。

回答1

• 在启动项目（如 npm run dev）前，先执行

export CHOKIDAR_USEPOLLING=true

回答2

工程目录中创建.env文件（与其它工程配置文件同级）并将以下内容添加到其中

CHOKIDAR_USEPOLLING=true

启动项目

拓展阅读

How To Hot Reload Auto Refresh React App On Wsl

Jan 9, 2021 • Isaac Mbuotidem • 1 min read

If you’re working on a React app on Windows using Windows Subsystem for Linux (WSL), you might find that your app does not reflect your changes on save.

Your first step to fixing this is to ensure that your React files are located on the WSL filesystem and not the Windows filesystem. For example, if your files are saved at :

C:Users\yourusername\Documents\test-react-app

Use the cp command to copy them over to your WSL filesystem like so:

cp -r /mnt/c/Users/yourusername/Documents/test-react-app ~/test-react-app.

The above will copy the files to your WSL user account’s home directory which you can always get to by typing wsl ~ from Command Prompt or Windows Terminal.

If that still does not work, try running your app in the terminal by prepending the commands below to npm start For example:

CHOKIDAR_USEPOLLING=true npm start

There is a chance that it still won’t auto-reload. In that case, try running your app with:

FAST_REFRESH=false npm start.

For whichever of these that works, you you might want to make it into a more permanent solution instead of having to type that in each time. To do that, you have two options.

You can create a .env file in your project directory if you don’t already have one and add

CHOKIDAR_USEPOLLING=true
FAST_REFRESH=false

to the .env file.

也可以试试这个，我感觉还是弄个.env方便
Or you can edit your package.json file like so:

{
  "scripts": {
    "start": "FAST_REFRESH=false react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
}