搭建vite2.0+vue3.0+ts+多页面打包+多环境+gzip+图片压缩框架_vite打包压缩图片

首先安装vite

npm init @vitejs/app
yarn create @vitejs/app
1
2

使用预设模板创建框架

yarn create @vitejs/app my-vue-app --template vue
1

支持的模板预设包括：

vanilla
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts

使用scss

npm i --save-d sass
<style lang="scss"> 即可
1
2

使用@路径

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": resolve("./src")
    }
  }
});
1
2
3
4
5
6
7
8

环境区分

1. 新增 .env.dev .env.test .env.prod 三个文件

VITE_PROJECT_ENV = 'prod'
1

(必须VITE开头)
在ts中可使用 import.meta.env.VITE_PROJECT_ENV 区分

2. package.json

"build": "vue-tsc --noEmit && VITE_PROJECT_ENV=prod vite build"
1

在vite.config.ts中使用 process.env.VITE_PROJECT_ENV === “prod”

多页面打包

const pageEntry = {};

(function () {
  // 遍历文件夹中含有main.ts的文件夹路径
  const allEntry = glob.sync("./src/views/**/main.ts");
  // 获取模板
  const temp = fs.readFileSync("./index.html");
  // 创建pages文件夹存放多页面模板
  if (!fs.existsSync("./pages")) {
    fs.mkdirSync("./pages");
  }
  // 创建多页面模板
  allEntry.forEach((entry: string) => {
    const pathArr = entry.split("/");
    const name = pathArr[pathArr.length - 2];
    // 判断文件是否存在
    try {
      fs.accessSync(`./pages/${name}.html`);
    } catch (err) {
      console.log(`创建${name}.html文件`);
      const index = temp.toString().indexOf("</body>");
      const content =
        temp.toString().slice(0, index) +
        `<script type="module" src=".${entry}"></script>` +
        temp.toString().slice(index);
      fs.writeFile(`./pages/${name}.html`, content, err => {
        if (err) console.log(err);
      });
    }
    // input中的配置
    pageEntry[name] = path.resolve(__dirname, `/pages/${name}.html`);
  });
})();
//views文件夹中添加文件即可，会获取里面的文件夹名在pages中生产模板

build: {
    outDir: isProd ? "dist" : "pre",
    rollupOptions: {
      input: pageEntry
    }
  }
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
35
36
37
38
39
40
41

gzip

import viteCompression from 'vite-plugin-compression';
plugins: [vue(), viteCompression()],
1
2

图片压缩

import viteImagemin from "vite-plugin-imagemin";
plugins: [vue(), viteImagemin()],
1
2

改良：

1. tsconfig.json新增：

"baseUrl": ".",
"paths": {
  "@/*": ["src/*"]
}
1
2
3
4

使页面引入ts不报错 import api from “@/api”;

2. 打包新增判断，pages已经有对应html的时候不进行创建文件

完整配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import glob from "glob";
import fs from "fs";
import viteCompression from "vite-plugin-compression";
import viteImagemin from "vite-plugin-imagemin";
const isProd = process.env.VITE_PROJECT_ENV === "prod";
const pageEntry = {};

(function () {
  // 遍历文件夹中含有main.ts的文件夹路径
  const allEntry = glob.sync("./src/views/**/main.ts");
  // 获取模板
  const temp = fs.readFileSync("./index.html");
  // 创建pages文件夹存放多页面模板
  if (!fs.existsSync("./pages")) {
    fs.mkdirSync("./pages");
  }
  // 创建多页面模板
  allEntry.forEach((entry: string) => {
    const pathArr = entry.split("/");
    const name = pathArr[pathArr.length - 2];
    // 判断文件是否存在
    try {
      fs.accessSync(`./pages/${name}.html`);
    } catch (err) {
      console.log(`创建${name}.html文件`);
      const index = temp.toString().indexOf("</body>");
      const content =
        temp.toString().slice(0, index) +
        `<script type="module" src=".${entry}"></script>` +
        temp.toString().slice(index);
      fs.writeFile(`./pages/${name}.html`, content, err => {
        if (err) console.log(err);
      });
    }
    // input中的配置
    pageEntry[name] = path.resolve(__dirname, `/pages/${name}.html`);
  });
})();

export default defineConfig({
  server: {
    fs: {
      strict: false
    }
  },
  plugins: [
    vue(),
    viteCompression({
      ext: ".gz",
      algorithm: "gzip",
      deleteOriginFile: false
    }),
    viteImagemin({
      gifsicle: {
        optimizationLevel: 7,
        interlaced: false
      },
      optipng: {
        optimizationLevel: 7
      },
      mozjpeg: {
        quality: 20
      },
      pngquant: {
        quality: [0.8, 0.9],
        speed: 4
      },
      svgo: {
        plugins: [
          {
            name: "removeViewBox"
          },
          {
            name: "removeEmptyAttrs",
            active: false
          }
        ]
      }
    })
  ],
  resolve: {
    alias: {
      "@": path.join(__dirname, "./src")
    }
  },
  build: {
    outDir: isProd ? "dist" : "pre",
    rollupOptions: {
      input: pageEntry
    }
  }
});

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

项目地址

https://github.com/jwnoal/vite_vue3