Vite

1、配置代理

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:8080",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

2、配置代理与显示请求日志

import path from "path";

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:8080",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
        configure: (proxy) => {
          proxy.on("proxyReq", (proxyReq) => {
            console.log(
              `代理请求: ${proxyReq.method} 
              ${proxyReq.protocol}${proxyReq.host}${proxyReq.path}
              `
            );
          });
        },
      },
    },
  },
});

3、配置@别名

在vite.config.js中配置

import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    //设置路径别名
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "*": path.resolve(""),
    },
  },
});

---

增强语法提示: 项目环境配置

4、配置地址和端口

export default defineConfig({
  server: {
    host: "0.0.0.0",
    port: 8080,
  },
});

5、多环境配置

1.创建环境

在根目录创建多环境文件

• .env.development - 开发环境
• .env.test - 测试环境
• .env.pre - 预发环境
• .env.production - 生产环境
• .env.xxx - xxxx 自动定义环境

开发环境 - 示例

# 开发环境
VITE_ENV = development

# 接口地址
VITE_API_BASE_URL = 'http://127.0.0.1:8088'

---

注意：只有以VITE开头的参数才会暴露出去

2.加载环境

在package.json中指定加载的环境

"scripts": {
    "dev": "vite --mode development",
    "test": "vite --mode test",
    "pre": "vite --mode pre",
    "prod": "vite --mode production",
    "xxx": "vite --mode xxx 自定义环境",
    "build:dev": "vite build --mode development",
    "build:prod": "vite build --mode production",
    "build:pre": "vite build --mode pre",
    "build:test": "vite build --mode test ",
    "preview": "vite preview"
}

---

备注：

1. npm run dev 自动加载 开发环境
2. npm run build 自动加载 生产环境

3.环境变量

使用import.meta.env获取环境中配置的变量

console.log(import.meta.env.VITE_ENV); // development

console.log(import.meta.env.VITE_API_BASE_URL); // http://127.0.0.1:8088

---

在 vite.config.js 中使用环境变量

• 例如：获取VITE_APP_NGINX_LOCATION_URL环境变量

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {

  const env = loadEnv(mode, process.cwd())
  const { VITE_APP_NGINX_LOCATION_URL } = env

  return {
    ...
  }
})

6、自动打开浏览器

export default defineConfig({
  server: {
    host: "0.0.0.0",
    port: 8080,
    open: true, // 服务启动时是否自动打开浏览器
  },
});

7、Vue3 子目录部署打包配置

1. 默认情况下，vite会假设你的应用是被部署在一个域名的根路径上，例如 https://www.mu00.cn

2. 如果应用被部署在一个子路径上，你就需要在打包时指定这个子路径(或者 Nginx 中 location 匹配的 URL 路径)，例如 https://www.mu00.cn/admin

1. 修改 vite-config

• 打包时需要配置base属性为：子路径(或者 Nginx 中 location 匹配的 URL 路径)

export default defineConfig({
  // 子路径(或者 Nginx 中 location 匹配的URL路径)
  base: "/admin/",
});

2. 修改 router

• 在router/index.js文件创建路由时，为createWebHistory或者createWebHashHistory传入base参数
• 参数值为：子路径(或者 Nginx 中 location 匹配的 URL 路径)

const router = createRouter({
  // 子路径(或者 Nginx 中 location 匹配的URL路径)
  history: createWebHistory('/admin/'),
  routes: [...],
})

8、Gzip 压缩

1. 安装vite-plugin-compression插件

npm i -D vite-plugin-compression

2. 配置vite.config.js

import ViteCompression from "vite-plugin-compression";

export default defineConfig({
  plugins: [
    ViteCompression({
      verbose: true, // 是否在控制台输出压缩结果
      disable: false, // 是否禁用压缩，默认值: false
      threshold: 10240, // 只处理大于此大小的资源（单位：字节）；默认值: 0
      algorithm: "gzip", // 使用 gzip 压缩
      ext: ".gz", // 输出文件的拓展名
    }),
  ],
});

需要Nginx配合，才能正确启用Gzip压缩

---

相关

• Nginx-开启 Gzip 压缩