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
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 separatemain.js
entry point