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: <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>,
}
},
},
],
}),
],
})
但在多页面应用中，如果指定了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: <script type="text/javascript" src="/anyscript.js"></script>,
}
}
}
],