0

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

Michal Levý
  • 33,064
  • 4
  • 68
  • 86
Richard
  • 7,037
  • 2
  • 23
  • 76
  • In my experience with Vue 2 and the Vue CLI, I haven't seen two Vue instances in main.js. I recommend using only one, usually used for rendering App.vue, and the other SFCs can be descendants (child, etc.) of App.vue. Convert some-page.html into the template of an SFC. – Tim May 21 '21 at 15:27
  • @Tim I'm trying to make two different pages instead of using one page that refreshes its content. (Non-SPA) – Richard May 21 '21 at 15:28
  • I recommend using Vue the way it's described and exampled in the documentation and tutorials, redesigning your application to fit that structure. Obviously up to you. Maybe someone else will have done what you are trying to do. – Tim May 21 '21 at 15:33

1 Answers1

0

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

Michal Levý
  • 33,064
  • 4
  • 68
  • 86