Is there a way to assign a page variable to one index.html file and use it?

[JangCool]

Is there a way to assign a page variable to one index.html file and use it?
I want to make only one and use it without making many index.html files.
Is there any way to use the variable?

In vue.config.js, it is used as follows:

[IndexXuan]

https://github.com/IndexXuan/vite-plugin-html-template/blob/main/src/lib/options.ts#L40

maybe you can try vite-plugin-html-template, works perfect with vite-plugin-mpa and recommended to use.

[JangCool]

@IndexXuan

Thank you. I used vite-plugin-html-template and it works fine. However, an error occurred when calling the [yarn build] command.

After moving index.html to the public folder, I removed everything else.

I can't find a solution. please help.

• vite.config.js :

import path from 'path';

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import htmlTemplate from 'vite-plugin-html-template'
import pages from "vite-plugin-pages";
import mpa from "vite-plugin-mpa";
import vueI18n from '@intlify/vite-plugin-vue-i18n'

// https://vitejs.dev/config/
export default defineConfig({
    server: {
        port: 8200,
        /* proxy: {
            '/api': {
            target: 'http://192.168.2.16:8304',
            changeOrigin: true,
            rewrite: path => path.replace(/^\/api/, '')
            }
        }, */
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
        }
    },
    build: {
        assetsDir: 'assets',
        manifest: false,
        outDir: 'dist',
        terserOptions: {
        compress: {
            keep_infinity: true,
            drop_debugger: true,
            drop_console: true,
        },
    },
    brotliSize: false,
    rollupOptions: {
            output: {
                assetFileNames: 'static/apps/css/[name].css',
                chunkFileNames: 'static/apps/js/[name].js',
                entryFileNames: 'static/apps/js/[name].js'
            }
        }
    },
    plugins: [
        vue(), 
        htmlTemplate({
            pages: {
                main: {
                    title: 'Hamonica Main',
                    entry: 'src/pages/main/main.js',
                },
                login: {
                    title: 'Hamonica Login',
                },
                cache: {
                    entry: 'src/pages/cache/main.js',
                    title: 'Hamonica Cache',
                },
                was: {
                    entry: 'src/pages/was/was.js',
                    title: 'Hamonica Was',
                },
            }
        }),
        pages({
            pagesDir: [
                { dir: "src/pages/**/pages", baseRoute: "" }
            ],
            exclude: ["**/components/*.vue"],
        }),
        mpa({
            
        }),
        vueI18n({
            // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
            compositionOnly: true,
        
            // you need to set i18n resource including paths !
            include: path.resolve(__dirname, './src/i18n/**')
        })
    ]
})

• package.json

{
  "name": "hamonica-fe-vite",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "@popperjs/core": "^2.10.2",
    "axios": "^0.23.0",
    "bootstrap": "^5.1.3",
    "dayjs": "^1.10.7",
    "js-cookie": "^3.0.1",
    "lodash": "^4.17.21",
    "sass": "^1.43.2",
    "vue": "^3.2.20",
    "vue-i18n": "^9.2.0-beta.13",
    "vue-router": "4.0.12",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@intlify/vite-plugin-vue-i18n": "^2.4.0",
    "@vitejs/plugin-vue": "^1.9.3",
    "node-sass": "^6.0.1",
    "sass-loader": "^12.2.0",
    "vite": "^2.6.4",
    "vite-plugin-html-template": "^1.0.6",
    "vite-plugin-mpa": "^1.1.1",
    "vite-plugin-pages": "^0.18.1"
  }
}

[IndexXuan]

yes, use vite-plugin-html-template, the index.html as a template should put into public folder.

I dont know the errors. maybe you can see the examples and find the different.
https://github.com/IndexXuan/vite-plugin-html-template/tree/main/examples/vite-mpa-project-non-standards

[JangCool]

@IndexXuan There is no difference from the link setting you answered. By comparison, I am the js config and you are the typescript config.

um... Is there no way? I didn't know it would get blocked in the [yarn build]... ;(

[IndexXuan]

if you cannot provide a mini repro demo. I cannot help.

[JangCool]

@IndexXuan ok.! Yes. Please wait. Thank u.

[JangCool]

@IndexXuan I'm sorry to have kept you waiting. mini repo => https://github.com/JangCool/vite-mpa

[JangCool]

@IndexXuan Don't you have the same error? I'm wondering that about the processing situation. If not, I'll try use the index.html file individually.