[TOC]

---

打包还是用的 rollup

插件也是和 rollup 部分兼容 https://cn.vitejs.dev/guide/api-plugin.html

环境变量

报错 Property 'env' does not exist on type 'ImportMeta' 需要在 tsconfig.node.json.compilerOptions.types 追加 "vite/client"

在 vite.config.js 文件中, 可以 直接使用 process.env.NODE_ENV 获取环境，但是没有办法拿到 接口地址信息等其它定义的变量信息，所以用 https://cn.vitejs.dev/config/ 提供的 loadEnv 风法获取

vite --mode server 需要创建 .env.server 文件，应用中采用 import.meta.env 获取配置内容

配合 vue 项目处理静态资源

具体参考： https://cn.vitejs.dev/guide/assets.html

/* 直接引入 */
import imgUrl from './img.png'
this.src = imgUrl

/* new URL() */
const imgUrl = new URL('./img.png', import.meta.url).href
this.src = imgUrl

/* 直接使用 */
<img src="./xx/xx/aa.png">

glob 导入

参考 https://cn.vitejs.dev/guide/features.html#glob-import

注意引入的地址必须以 ./ / 开头， 如果是第三方有些模块引入，只能用原生动态 import 将地址写死引入

// 合并引入
const modules = import.meta.glob("./test/*.js", { eager: true });
for (const path in modules) {
  modules[path].default;
}
/* 编译后 const i=Object.assign({"./test/t1.js":u,"./test/t2.js":d});for(const n in i)i[n].default; */

// 单个chunk引入
const modules = import.meta.glob("./test/*.js");
for (const path in modules) {
  modules[path]().then((mod) => {
    console.log(path, mod);
  });
}
/* 编译后 ()=>import("./t1-fce95df2.js") ()=>import("./t2-3a0c187c.js") */

const a = "t1";
import(`./test/${a}.js`);
/* 这里采用变量 会将 test 模块下的所有 js 文件 都导出 */

配置

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import legacy from "@vitejs/plugin-legacy";
import vue2 from "@vitejs/plugin-vue2";

/* vue3 */
import vue from '@vitejs/plugin-vue'

import { visualizer } from "rollup-plugin-visualizer";

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  /* 获取环境配置 */
  const env = loadEnv(mode, `${process.cwd()}/env`)

  // `import.meta.env` 不能在配置文件中用

  return {
    envDir: './env', // 配置 环境变量文件所在的文件夹地址
    server: {
      host: "0.0.0.0",
      port: 3011,
      // 是否开启 https
      https: false,
    },
    plugins: [
      vue2(),
      vue(), // vue3
      legacy({
        targets: ["ie >= 11"],
        additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
      }),
    ],
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
        '@cross': fileURLToPath(new URL('./crossProjectModule', import.meta.url)),
      },
    },
    proxy: {
      '/x': {
          target: env.VITE_BASE_URL,
          changeOrigin: true, 
      },
    },
  }
})

插件

可视化分析包

rollup-plugin-visualizer 可视化分析包 是一个 rollup 插件

https://github.com/btd/rollup-plugin-visualizer

/* vite.config.js */
import { visualizer } from "rollup-plugin-visualizer";
export default defineConfig(({ mode }) => {
  return {
    plugins: [
      visualizer({
        // 生成文件名
        filename: "visualizer/index.html",
        // html 浏览器 tag
        title: "",
        // 是否自动打开生成的文件
        open: false,
        // 是否自动打开生成的文件， 图标类型 sunburst, treemap, network, raw-data, list
        template: "treemap",
        // 搜集显示 gzip
        gzipSize: false,
        // 搜集显示 brotli
        brotliSize: false,
        // 分析文件是否直接放到打包目录
        emitFile: false,
        // 使用 sourcemap  计算大小
        sourcemap: "",
        // 根地址 默认就是当前项目的根地址
        projectRoot: "",
      }),
    ],
  }
})

GZIP

安装插件 yarn add vite-plugin-compression -D

/* vite.config.js */
import viteCompression from "vite-plugin-compression";
plugins: [viteCompression()];