The vue project uses a custom domain name to open local services (ip address and domain name mapping)

foreword

Sometimes, we directly use script requests to obtain data under the same top-level (first-level) domain name.
When the local service is turned on, it is generally localhost, or with ip. If you want to customize the domain name to access local services, you need to do the following configuration.

IP address and domain name mapping

When requesting a domain name, the hosts file of the computer will be accessed first, so we first associate our custom domain name with the local ip address.

host file modification

Address: C:\Windows\System32\drivers\etc

If the custom domain name is zsk.haha.com, add an item in the figure below to the hosts file, save it, and close it.

127.0.0.1 zskhaha.com

Project local service configuration

After modifying the hosts file, you need to modify the local service of the project before it can be accessed normally.
Take vite as an example:
it is very simple, just change the host attribute, change the host attribute of the server object under vite.config.ts to a custom domain name (zsk.haha.com)

Then npm run dev starts successfully.

epilogue

If npm run dev reports strange errors after startup, for example:

1. hosts file domain name mapping ip address is wrong
2. The domain name of the host attribute of the project is wrongly written.