Member-only story
After each deployment, users encounter errors in client-side page routing, necessitating a manual page refresh to access the latest resources.
The specific cause of this problem lies in the use of page module lazy loading in vue-router. After packaging, the dist/assite folder contains numerous small JS files. While this significantly improves the speed of the project’s initial loading, it exposes a drawback. During deployment, using automated tools to clear previous project files and move the post-build files essentially replaces the entire project. Consequently, if the client doesn’t actively refresh the browser, the user’s local project remains on the previous version. When attempting to navigate pages or import other packages, the server cannot locate the previous packages.
Solutions:
To address this issue, several solutions were considered:
1. Define a version interface in collaboration with the backend.
- Requires coordination between frontend and backend, along with a comprehensive process control, data table maintenance, etc.
- Implementation is relatively complex and time-consuming.
2. Generate a JSON file during frontend packaging to record the version. Decide whether to refresh based on a…
