Vue3+Vite+Js项目搭建之二：vite.config.js 构建

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// icon 组件
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import { resolve } from "path";
// https://vitejs.dev/config/
export default defineConfig({
base: "./",
// 静态资源服务的文件夹
publicDir: "public",
resolve: {
alias: {
"@": resolve(__dirname, "./src"),
},
},
server: {
// 是否开启https
https: false,
// 端口号
port: 3000,
// 监听所有地址
host: "0.0.0.0",
// 启服务自动打开浏览器
open: false,
// 允许跨域
cors: true,
proxy: {
// 普通接口映射地址
"/dev-api": {
// 本地环境
// target: "http:// xxx.x.xxx.xxx:8080",
// 测试环境
target: "http:// xxx.x.xxx.xxx:8080",
// 生产环境
// target: "http:// xxx.x.xxx.xxx:8080",
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(/^\/dev-api/, ""),
},
// 文件接口映射地址
"/dev-api/file": {
// 开发环境
// target: `http:// xxx.x.xxx.xxx:8080`,
// 测试环境
target: "http:// xxx.x.xxx.xxx:8080",
// 生产环境
// target: "http:// xxx.x.xxx.xxx:8080",
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(/^\/dev-api/, ""),
},
},
},
plugins: [
vue(),
createSvgIconsPlugin({
// 指定缓存文件
iconDirs: [resolve(process.cwd(), "src/assets/svg")],
// 指定symbolId格式
symbolId: "icon-[dir]-[name]",
}),
],
build: {
// 浏览器兼容目标 "esnext" | "modules"
target: "modules",
// 打包输出路径
outDir: "dist",
// 静态资源路径
assetsDir: "assets",
// 构建后是否生成 source map 文件
sourcemap: false,
// chunk 大小警告的限制（以 kbs 为单位）
chunkSizeWarningLimit: 2000,
// 启用/禁用 gzip 压缩大小报告
reportCompressedSize: false,
},
define: {
// 解决 process.env 找不到 (process is not defined)
// 使用 import.meta.env.VITE_APP_BASE_API 调用环境变量
"process.env": {},
},
});