javascript - multiple pages in Vue.js CLI

Question

I'm having trouble figuring out how to have multiple pages in a Vue CLI project. Right now I have my home page with a few components and I want to create another page but I do not know how to do that. Am I supposed to create multiple html files where the index.html by default is? In a simple file structure with css js img folder and html files as pages I know that creating another html file means making another page. But I don't understand how this works with Vue CLI project.

I saw stuff like vue-router and "pages" in Vue documentation but I do not understand them very well. What are my alternatives? Is there a guide that explains that in detail, because I wasn't able to find any, let alone detailed. Would be very happy if you could help! Thank you!

Answer 1

First: always read the official documentation. With Vue you can build a SPA, and a MPA is also no problem. Just follow the guides:

• https://cli.vuejs.org/
• https://cli.vuejs.org/guide/html-and-static-assets.html#building-a-multi-page-app
• https://cli.vuejs.org/config/#pages

You should create a new project with Vue CLI 3. Once you've created your project set it to be manually configured. Make sure you don't choose the SPA option. Vue will then create a nice "start" project using a MPA approach. After that, just repeat the config on vue.config.js.

---

Updated #1

It seems that some updates on Vue Cli, have changed the way to build a MPA app, so:

• Create a new application vue create test
• Choose Manual configuration

The boilerplate created will be for a SPA. So make the following changes:

• Create a folder under src named pages (optional)

• Into this folder create your own pages: Home, About, etc.

• Copy and paste the App.vue and main.js from src, into your new folders - Home, etc.

• Format the App.vue into this folders, to your liking.

• Create a vue.config.js and set it like this: https://cli.vuejs.org/config/#pages

Below, I have three images demonstrating this:

• First: a fresh new app
• Second: this same app, with the changes I made above
• Third: the vue.config.js from this app

You don't need to create the pages folder, this is just to get the idea.

Link to GitHub: Building a MPA App