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"
}

备注：

npm run dev 自动加载开发环境
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 子目录部署打包配置

默认情况下，vite会假设你的应用是被部署在一个域名的根路径上，例如 https://www.mu00.cn
如果应用被部署在一个子路径上，你就需要在打包时指定这个子路径(或者 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压缩

安装vite-plugin-compression插件

npm i -D vite-plugin-compression

配置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压缩