How to build files for two HTML pages using Vue?

Question

Right now, I have two HTML files I want to build. My project structure is like so.

|- node_modules
|- public
|  |- blog
|  |  |- some-page.html
|  |- index.html
|- src (contains all the Vue components)
   |- Blog.Vue
   |- Index.Vue
   |- main.js

In my some-page.html , I have a div with the ID blog and in my index.html file, I have a div with the ID app . Then, in my main.js , I have this code.

import Vue from 'vue';
import Index from './Index.vue';
import Blog from './Blog.vue';
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;

new Vue({
  vuetify,
  render: (h) => h(Index),
}).$mount('#app');

new Vue({
  vuetify,
  render: (h) => h(Blog),
}).$mount('#blog');

When I build the project, the some-page.html doesn't get updated at all. The index.html page works fine. How can I make it so when I build the project, the some-page.html is also injected with the Vue component? I want to upload the built files to my server for hosting for my personal experimentation of using Vue.

I have the source code published on Github here: https://github.com/171112542/seo

Answer 1

As you are using Vue CLI, you can use it's "multi-page mode" configurable with the pages config

Note that each html template should have it's own separate main.js entry point