Vite multi-page application configuration & injecting data or tags into html templates using vite-plugin-html

vite configure multi-page application

Example of the official website:

During development, simply navigating or linking to /nested/ - will work as expected, consistent with normal static file server behavior.

That is, if your folder has the following hierarchy:

 {
  src: {
    pages: {
      demo1: {
        App.vue
        main.ts
      },
      demo2: {
        App.vue
        main.ts
      },
      demo1.html
      demo2.html
    }
  }
}

Then to access your page through vite's development server, you need to visit a link such as localhost:3000 /src/pages/demo1.html #/index. After packaging, index.html will also appear in the dist/src/pages folder. inconvenient.

It can be solved by configuring the root option in vite.config.ts

The project root directory (where the index.html file is located). Can be an absolute path, or a relative path relative to the configuration file itself.

 // vite.config.js
const { resolve } = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
    root:'src/pages'
})

But when root is configured, most addresses in vite.config.ts will automatically start with the root option, for example:

 // vite.config.js
Components({
      resolvers: [VantResolver()],
      dts: 'src/types/components.d.ts' //这里的地址会被解析为src/pages/src/types,导致报错
    })

The address here will be parsed as src/pages/src/types, resulting in an error

no such file or directory, open '/xxxxx/src/pages/src/types/components.d.ts'

Just spell out the absolute path:

 import { join } from 'path'
const resolve = dir => join(__dirname, dir)
Components({
  resolvers: [VantResolver()],
  dts: resolve('src/types/components.d.ts')
})

At this point vite.config.ts:

 // vite.config.js
const { resolve } = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
  root: 'src/pages',
  build: {
    rollupOptions: {
      input: {
        piat: resolve('src/pages/demo1.html'),
        demo: resolve('src/pages/demo2.html')
      }
    }
  }
})

At this point, the development environment can be accessed through localhost:3000/demo1.html#/index
After packaging, demo1.html will also be under dist

vite-plugin-html configuration

vite-plugin-html can be configured according to the official documentation. Chinese document

 import { defineConfig } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig({
  plugins: [
    createHtmlPlugin({
      minify: true,
      pages: [
        {
          entry: 'src/main.ts',
          filename: 'index.html',
          template: 'public/index.html',
          injectOptions: {
            data: {
              title: 'index',
              injectScript: `<script src="./inject.js"></script>`,
            },
          },
        },
        {
          entry: 'src/other-main.ts',
          filename: 'other.html',
          template: 'public/other.html',
          injectOptions: {
            data: {
              title: 'other page',
              injectScript: `<script src="./inject.js"></script>`,
            }
          },
        },
      ],
    }),
  ],
})

But in multi-page applications, if root is specified, vite-plugin-html will report an error , similar to the problem: github- issue#53

After many attempts, I found that the template in the vite-plugin-html configuration item must be configured without root configuration, and the use of the resolve absolute path will fail to inject !

 ReferenceError: ejs:7
title is not defined

Solution: configure root by environment

 root: mode === 'development' ? 'src/pages' : '',

vite-plugin-html configuration:

 pages: [
        {
          entry: resolve('src/pages/demo1/main.ts'), // 多页面的入口文件
          filename: 'demo1.html', // 打包后生成的html文件名
          template: 'src/pages/demo1.html', // 打包和注入使用的模板文件
          injectOptions: {
            data: {
              title: '随便什么title',
              injectScript: `<script type="text/javascript" src="/anyscript.js"></script>`,
            }
          }
        }
      ],