关于vite:Vite多页面应用配置使用vitepluginhtml向html模板注入数据或标签

14次阅读

共计 2286 个字符，预计需要花费 6 分钟才能阅读完成。

官网的例子：

在开发过程中，简略地导航或链接到 /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 依照官网文档配置即可。中文文档

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>`,
            }
          }
        }
      ],

正文完