import { defineConfig } from 'vite'
import { resolve } from 'path';
import vue from '@vitejs/plugin-vue'
// Element 按需加载配置
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// end
import viteCompression from 'vite-plugin-compression' // 文件压缩
import viteImagemin from 'vite-plugin-imagemin' // 图片压缩
// import.meta.env.VITE_API_URL env 使用语法
// npm i vite-plugin-compression -D gzip 压缩
// npm install -D unplugin-vue-components unplugin-auto-import
// cnpm i vite-plugin-imagemin -D 图片压缩 这包很难下载(注:尽量用cnpm 下载)
export default defineConfig({
plugins: [
vue(),
viteCompression(), // gzip代码压缩
// 图片压缩
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,
},
],
},
}),
// ... Element 按需加载
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),],
// 为了兼容Linux系统 最好使用相对路径
base: './',
// 起别名
resolve: {
alias: {
'@': resolve(__dirname, 'src/components')
}
},
server: {
host: '0.0.0.0',//这里是服务器ip 写出0.0.0.就可以
port: 80,
open: true, // 自动运行在浏览器中
proxy: { //跨域代理 gitee 还有rewrite里面的gitee 改成自己项目里面的
'/gitee': {
target: 'https://gitee.com',
ws: true,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/gitee/, ''),
},
},
},
// 线上环境移除console日志
build: {
minify: 'terser', // 需要加上这个才生效
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
ie8: true,
output: {
comments: true,
},
},
outDir: 'dist',// 打包输出是文件名
sourcemap: false, //线上环境关闭 HTML注释
chunkSizeWarningLimit: 1500, // 大小警告的限制 模式是500 (以 kbs 为单位)
// 打包时 吧资源分类
rollupOptions: {
output: {
entryFileNames: `js/[name]-[hash].js`,
chunkFileNames: `js/[name]-[hash].js`,
assetFileNames: `[ext]/[name]-[hash].[ext]`,
},
},
},
})
vite 常规配置
于 2022-05-13 13:50:31 首次发布