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

更新时间：2023年12月04日 11:12:22 作者：bestyinjun

这篇文章主要给大家介绍了关于vue3项目vite.config.js配置代理、端口、打包名以及图片压缩的相关资料,因为3.0版本中vue已经内置了很多关于webpack的配置,一般情况下开箱即用,需要修改则可以在vue.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，亲测有效，只需要修改成自己想要的文件名、路径即可。

到此这篇关于vue3项目vite.config.js配置代理、端口、打包名以及图片压缩的文章就介绍到这了,更多相关vue3项目vite.config.js配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3+js Vite多环境端口配置以及@别名设置的一次尝试过程

vue如何在store仓库中使用路由
这篇文章主要介绍了vue如何在store仓库中使用路由，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Vue中自定义全局组件的实现方法
这两天学习了Vue.js 感觉组件这个地方知识点挺多的，而且很重要，所以这篇文章主要给大家介绍了关于Vue中自定义全局组件的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-12-12
VUE正则表达式用法全集整理(推荐！)
正则表达式是由一些特定的字符组成,代表一个规则,可以用来检验数据格式是否合法,也可以在一段文本中查找满足要求的内容,这篇文章主要给大家介绍了关于VUE正则表达式用法的相关资料,需要的朋友可以参考下
2024-02-02
Vue按钮权限的实现示例
在编写Vue代码的时候,经常会碰到各种权限问题,本文主要介绍了Vue按钮权限的实现示例,具有一定的参考价值,感兴趣的可以了解一下
2024-08-08
Vue项目动态加载图片正确写法
最近做项目的时候遇到了动态加载图片的需求,所以这里给大家总结下,这篇文章主要给大家介绍了关于Vue项目动态加载图片的正确写法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-04-04
Vue监听Enter键的方法总结与区别
这篇文章主要给大家介绍了关于Vue监听Enter键的方法与区别的相关资料,在Vue中我们可以通过监听键盘事件来实现回车键切换焦点的功能,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-10-10
element跨分页操作选择详解
这篇文章主要为大家详细介绍了element跨分页操作选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
VUE对Storage的过期时间设置,及增删改查方式
这篇文章主要介绍了VUE对Storage的过期时间设置,及增删改查方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
uniapp+vue3实现自定义封装支付密码组件
本文介绍使用Vue3语法在uniapp中自定义封装支付密码组件,通过父组件与子组件的交互实现密码输入功能,并附效果图展示,感兴趣的朋友跟随小编一起看看吧
2025-08-08
关于在Vue中import和require的用法分析
在Vue项目中，我们经常需要引入外部的模块或文件，这时候就会用到import和require这两个关键字，本文将详细分析它们的用法，并提供具体的代码实例和解释,需要的朋友可以参考下
2023-06-06