Vite多页面应用配置&使用vite-plugin-html向html模板注入数据或标签

vite配置多页面应用

官网的例子：

在开发过程中，简单地导航或链接到 /nested/ - 将会按预期工作，与正常的静态文件服务器表现一致。

也就是说，如果你的文件夹有如下层级：

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

那么通过vite的开发服务器访问你的页面，需要访问localhost:3000/src/pages/demo1.html#/index这样的链接，打包后index.html也会出现在dist/src/pages文件夹下，很不方便。

可以通过配置vite.config.ts中的root选项解决

项目根目录（index.html 文件所在的位置）。可以是一个绝对路径，或者一个相对于该配置文件本身的相对路径。

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

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

但是配置了root后，vite.config.ts中的大部分地址都会自动从root选项开始，例如：

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

这里的地址会被解析为src/pages/src/types,导致报错

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

拼出绝对路径即可：

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

此时的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')
      }
    }
  }
})

此时开发环境通过localhost:3000/demo1.html#/index即可访问
打包后demo1.html也会在dist下

vite-plugin-html配置

vite-plugin-html按照官方文档配置即可。中文文档

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: ``,
            },
          },
        },
        {
          entry: 'src/other-main.ts',
          filename: 'other.html',
          template: 'public/other.html',
          injectOptions: {
            data: {
              title: 'other page',
              injectScript: ``,
            }
          },
        },
      ],
    }),
  ],
})

但在多页面应用中，如果指定了root，vite-plugin-html会报错，类似问题：github-issue#53

多次尝试后发现,vite-plugin-html配置项中的template，必须在没有root配置的情况下配置，而且使用resolve绝对路径会注入失败！

ReferenceError: ejs:7
title is not defined

解决：按环境配置root

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

vite-plugin-html配置：

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