vite 常规配置

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]`,
      },
    },
  },
})

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值