一、vite.config.js 常见配置项
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import qiankun from "vite-plugin-qiankun";
export default defineConfig({
// 开发或生产环境服务的公共基础路径
base: "/subapp/sub-vue3-vite",
// 将目录设定为静态资源服务目录，可设置 false 关闭
publicDir: "public",
// 存储缓存文件的目录。此目录下会存储预打包的依赖项或 vite 生成的某些缓存文件，使用缓存可以提高性能。默认为 .vite
cacheDir: ".vite",
// 定义全局常量
define: {
__APP_VERSION__: JSON.stringify("v1.0.0"),
__window_API__: "window", // 此 window 为 window 对象
},
// 解析选项，路径别名替换、导入时想要省略的扩展名列表。
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
"~": fileURLToPath(new URL("./src/assets", import.meta.url)),
},
extensions: [".mjs", ".js", ".mts", ".ts", ".jsx", ".tsx", ".json", ".vue"],
},
// 插件数组
plugins: [
vue(),
qiankun("sub-vue3-vite", {
useDevMode: true,
}),
],
// 开发选项：服务器主机、端口、端口被占用直接退出、自动打开浏览器、代理规则、配置 cors 默认true、定义调试阶段生成资源的 origin、配置headers等。
server: {
host: "0.0.0.0",
port: 3002,
strictPort: true,
open: true,
proxy: {
"/api": {
target: "http://jsonplaceholder.typicode.com",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
cors: true,
origin: "http://localhost:3002",
headers: {
"Access-Control-Allow-Origin": "*",
},
},
// 构建选项：输出目录、存放静态资源的目录、静态资源内联限制、CSS代码拆分、是否生成sourcemap文件、删除console和debugger、rollup打包规则配置等
build: {
outDir: "dist",
assetsDir: "assets",
assetsInlineLimit: 4096, // 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项。
cssCodeSplit: true,
sourcemap: false,
terserOptions: {
compress: {
drop_console: true, // 生产环境下去除console
drop_debugger: true, // 生产环境下去除debugger
},
},
rollupOptions: {
input: {
main: fileURLToPath(new URL("index.html", import.meta.url)),
},
output: {
manualChunks: {
vue: ["vue"],
},
},
},
},
});
二、打包部署测试
- 打包构建
npm run build
- 启动本地 http 服务测试
// 安装 http-server
npm install http-server -g
// 在 dist 根目录下执行
http-server -p 3000
