0. Vite 多页配置

使用vite-plugin-html接管 html 的配置，完成开发模式下的 html 页面生成，以及生产模式下的多页打包。

1
npm i -D vite-plugin-html

然后配置 vite.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { createHtmlPlugin } from "vite-plugin-html";

// https://vitejs.dev/config/
export default defineConfig({
  base: "./", // 必须，插件生成出来的js引用使用绝对路径，不配置base会出错
  rollupOptions: {
    // 定义多页打包
    input: {
      index1: "src/page1/main.js",
      index2: "src/page2/main.js",
    },
  },
  plugins: [
    vue(),
    createHtmlPlugin({
      minify: true,
      viteNext: true, // vite5.0.0以上版本需要开启
      pages: [
        {
          entry: "/src/page1/main.js", // 配置入口文件
          filename: "index.html", // 配置打包出来的html文件名称
          template: "index.html", // 指定模板
        },
        {
          entry: "/src/page2/main.js",
          filename: "index2.html",
          template: "index2.html",
        },
      ],
    }),
  ],
});

1. Vite 降级配置

Vite 默认的引用 js 的方式是 modules 引用，导致必须使用一个 http 服务器打开 html 文件，在有些时候不方便，需要引入使用@vitejs/plugin-legacy做降级配置。

1
npm i -D @vitejs/plugin-legacy
1
2
3
4
5
6
7
8
9
10
11
12
13
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import legacy from "@vitejs/plugin-legacy";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ["defaults", "not IE 11"],
    }),
  ],
});

降级后即可双击打开 html 文件

2. Vite 单页面应用

使用vite-plugin-singlefile做单页面配置

1
npm i -D vite-plugin-singlefile
1
2
3
4
5
6
7
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { viteSingleFile } from "vite-plugin-singlefile";

export default defineConfig({
  plugins: [vue(), viteSingleFile()],
});

所有的资源将会转换成base64，css和js转为内嵌，不用module的方式引入，所以也可以双击打开。