Today, I spent quite a bit of time researching Vue multi-page applications. I feel that it is quite versatile and I may need to use it again in the future, so I decided to organize it a bit and put it on GitHub: vue-multi-pages
Let's talk about the background and current situation.
Since Vue is originally designed for single-page applications, projects generated by vue cli are also single-page. Under the premise of single-page applications, many configurations are default and developers are unaware of them. However, once it is converted into a multi-page application, many configurations that were hidden internally and not needed by developers before, now need to be known and modified.
In addition, there is not much official guidance, and various versions are intertwined online, making it quite tiring to learn, and it is difficult to determine which is the best practice. If one could read more of the Vue source code, it might be easier to judge; however, I guess the vast majority of people do not have the patience and time for that.
Technically, there are roughly two ways to implement it: through pages and router; the latter is essentially still a single-page application, but using the router makes it appear as if it is a multi-page application, and the more thorough way is through the pages method.
I won't go into detail, those who are familiar can understand everything by looking at the code directly. Here are some key points:
- Supports multi-level directories
- Includes router, vuex examples
- Built-in rough implementation of global 404
- The code currently does not include examples of private and public Components, but it should be easy to implement
- Referenced vue-multiple-pages and developed further based on it
Speaking of which, I wonder if Vue 3 will have better native support for multi-page applications, looking forward to it.
Original Blog Post: 0226 - Open Sourced My Own Vue Multi-Page Framework