How to create multiple pages in vite ( vue js 3 )

Hello

I'm trying to build a web app that shows all the countries in the world with their information, upon clicking on a country the user will be redirected to a different page with detailed information of the clicked country.

So the point is when i use the build function to create the production code, the second html(the country page where detailed info is given) file isn't built, my repo: MY REPOSITORY

this is how my directory is:

root
--vite.config.js
--node_modules
--public
--scss
--package.json
--package-lock.json
--src
----index.html
----App.vue
----main.js
----components (not inportant)
----country
--------country.js
--------country.html
--------AppCountry.vue

this is my vite.config.js file

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'node:path'

// https://vitejs.dev/config/
export default defineConfig({
  // base: "/countries-api/",
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },

  },
    build:{
      rollupOptions:{
        input:{
          main:resolve(__dirname, 'index.html'),
          country:resolve(__dirname, 'src/country/country.html')
        },
        external:[
          resolve(__dirname, 'src/country/country.js')
        ],
      },
      watch:{

      }
    }
})