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.jsconst { resolve } = require('path')const { defineConfig } = require('vite')module.exports = defineConfig({ root:'src/pages'})然而配置了root后，vite.config.ts中的大部分地址都会主动从root选项开始，例如：
// vite.config.jsComponents({ 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.jsconst { 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:7title 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>`, } } } ],