vue3+ vite项目配置公共路径、自动移除console.log、跨域代理、gzip

1.公共路径base

可以使用./

在vite.config.ts中添加base配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base:'./',
  plugins: [vue()],
})

2. 生产环境自动移除console.log

在vite.config.ts中添加以下配置

build: {
  minify: 'terser',
  terserOptions: {
    compress: {
      // 生产环境时移除console
      drop_console: true,
      drop_debugger: true,
    },
  },
},

需要注意

terser在vite v3 后，需要npm i 了

3.跨域代理

安装axios

vite.config.ts后面追加

server: {
  proxy: {
    // 字符串简写写法：http://localhost:5173/foo -> http://localhost:4567/foo
    '/foo': 'http://localhost:4567',
    // 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
    '/api': {
      target: 'http://jsonplaceholder.typicode.com',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^/api/, ''),
    },
    // 正则表达式写法：http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/
    '^/fallback/.*': {
      target: 'http://jsonplaceholder.typicode.com',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^/fallback/, ''),
    },
    // 使用 proxy 实例
    '/api_proxy': {
      target: 'http://jsonplaceholder.typicode.com',
      changeOrigin: true,
      configure: (proxy, options) => {
        // proxy 是 'http-proxy' 的实例
      }
    },
    // 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
    '/socket.io': {
      target: 'ws://localhost:5174',
      ws: true,
    },
  },

4.gzip 代码压缩

安装

npm i vite-plugin-compression -D

在vite.config.ts中引入然后配置使用

import viteCompression from 'vite-plugin-compression'

viteCompression(
    {
      algorithm: 'gzip',
      deleteOriginFile: true
    }
)

这个有一些配置项

可以根据需求自定义配置