[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
文件中, 可以 直接使用 p
获取环境,但是没有办法拿到 接口地址信息等其它定义的变量信息,所以用 https://cn.vitejs.dev/config/ 提供的 loadEnv 风法获取
vite --mode server
需要创建 .env.server
文件,应用中采用 i
获取配置内容
配合 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()];