vue3 vite 配置端口和反向代理

vue yekong

最近在学习vite反向代理以及端口的配置,记笔记。

import {fileURLToPath, URL} from 'node:url'
import compressPlugin from "vite-plugin-compression"; //静态资源压缩
import legacyPlugin from '@vitejs/plugin-legacy'; //浏览器兼容
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

var qiniuPrefix = require('./qiniu-upload-prefiex')
const path = require('path')

export default defineConfig({
    plugins: [vue(),
        compressPlugin({ //gzip静态资源压缩
            verbose: true,    // 默认即可
            disable: false,  //开启压缩(不禁用),默认即可
            deleteOriginFile: false, //删除源文件
            threshold: 10240, //压缩前最小文件大小
            algorithm: 'gzip',  //压缩算法
            ext: '.gz', //文件类型
        }),
        legacyPlugin({
            targets: ['chrome 52'], // 需要兼容的目标列表,可以设置多个
            additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
        }),
        vueJsx()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    build: {
        outDir: 'dist/',
    },
    server: {
        port: 3012,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            '/api': {
                target: 'https://freeter.com/api',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    },
})

喜欢