vue3项目vite.config.js配置“代理”、“端口”、“打包名”、“图片压缩”

前言

我们在搭建vue3项目的时候不可避免的会遇到“代理”、“端口”、“打包名”、“图片压缩”等配置问题,本文逐一讲述该怎么样在vite.config.js中去配置。


一、配置代理端口和代理转发

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

export default defineConfig({
    server: {
        host: 'localhost',
        port: 8080, // 端口
        proxy: {
            '/api': { // 请求接口中要替换的标识
                target: 'http://117.62.22.235:17009', // 代理地址
                changeOrigin: true, // 是否允许跨域
                secure: true,
                rewrite: (path) => path.replace(/^\/api/, '') // api标志替换为''
            }
        }
    },
    plugins: [vue()]
})


二、修改打包名

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

export default defineConfig({
    plugins: [vue()],
    build: {
        outDir: 'distBigScreenBase' // 打包文件的输出目录
    }
})

三、使用@

vite.config.ts添加如下代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': resolve(__dirname, './src')
        }
    }
})
ts.config.json添加如下代码
{
    "compilerOptions": {
        "paths": {
            "@/*": ["src/*"]
        }
    }
}

四、图片压缩

图片压缩先要引入vite-plugin-imagemin插件

命令:npm i vite-plugin-imagemin -D

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

export default defineConfig({
    plugins: [vue(),
        // 图片压缩
        viteImagemin({
            gifsicle: {
                optimizationLevel: 7,
                interlaced: false
            },
            optipng: {
                optimizationLevel: 7
            },
            mozjpeg: {
                quality: 20
            },
            pngquant: {
                quality: [0.8, 0.9],
                speed: 4
            },
            svgo: {
                plugins: [
                    {
                        name: 'removeViewBox'
                    },
                    {
                        name: 'removeEmptyAttrs',
                        active: false
                    }
                ]
            }
        })
    ]
})

五、完整代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";
import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
    server: {
        host: 'localhost',
        port: 8080,
        proxy: {
            '/api': { // 请求接口中要替换的标识
                target: 'http://117.62.22.235:17009', // 代理地址
                changeOrigin: true, // 是否允许跨域
                secure: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    },
    plugins: [vue(),
        // 图片压缩
        viteImagemin({
            gifsicle: {
                optimizationLevel: 7,
                interlaced: false
            },
            optipng: {
                optimizationLevel: 7
            },
            mozjpeg: {
                quality: 20
            },
            pngquant: {
                quality: [0.8, 0.9],
                speed: 4
            },
            svgo: {
                plugins: [
                    {
                        name: 'removeViewBox'
                    },
                    {
                        name: 'removeEmptyAttrs',
                        active: false
                    }
                ]
            }
        })
    ],
    build: {
        outDir: 'distBigScreenBase' // 打包文件的输出目录
    },
    resolve: {
        alias: {
            '@': resolve(__dirname, './src')
        }
    }
})

总结

vue3的配置和vue2有所不同,不能照搬照套vue2,那样会报错。代码可以直接copy,亲测有效,只需要修改成自己想要的文件名、路径即可。

  • 4
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值