关于vite:Vite多页面应用配置使用vitepluginhtml向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: `<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>`,
            }
          }
        }
      ],