vue3: Vite + whistle, development environment agent solution configuration, easy to debug online environment problems locally

1. Follow the official instructions to install whistle

Address: https://wproxy.org/whistle/

代理方式推荐使用浏览器SwitchOmega工具：如下图

2. SwitchOmega adds proxy conditions

Note: After filling in, you must click "Apply Options" for the configuration to take effect.

3. vite.config.jsConfiguration (must be configured, otherwise vite-related files cannot be accessed)

server: {
    
    
      hmr: {
    
    
        protocol: 'ws',
        host: '127.0.0.1'
      }
    },

4. Access http://localhost:8899, in rulesthe tab, fill in the proxy domain name. As shown below

http://localhost:8899To obtain the port number, in proxythe tab of the SwitchOmega tool, whatever the proxy port configured below will be accessed, the default is 8899. As shown below

5. At this point, all configurations are completed. Access the online domain name you configured and you can debug locally. As shown below

One final issue needs to be explained:

• If your system is deployed in a secondary directory of a domain name, you must also configure the domain name instead of the secondary access directory. The configured secondary access directory cannot be accessed. For example: your system may be deployed in http://xxx.xxx.com/app1, and the proxy can only be configured http://xxx.xxx.cominstead http://xxx.xxx.com/app1. Please refer to step 4 above for details.

Now, you can debug online environment problems locally.