Vue3+vite打包配置及部分打包优化~

这里介绍的是vite项目的打包配置，若想了解webpack打包配置可看我的其他博客。（下面来介绍下vite打包配置的步骤）

1、步骤一：配置base。(为什么需要配置base？这里配置base主要是修改根路径，一般我们在开发环境中引用静态资源可能使用的是绝对路径，但是一旦打包部署到服务器上后可能会报404,无法正确的获取的资源。)

TypeScript 复制代码

//在vite.config.ts中
import { defineConfig } from 'vite'

export default defineConfig({
//配置根路径，解决部署到服务器之后绝对路径会报404问题，所以需改为相对路径
  base:"./",
})

2、步骤二：可根据需要配置组件及静态资源路径别名（若配置了路径别名使用方法和typescript的类型别名一样，直接替换原路径即可）

TypeScript 复制代码

//在vite.config.ts中
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
//配置组件路径别名需引入resolve
import{resolve} from 'path'

export default defineConfig({
  //配置根路径，解决部署到服务器之后绝对路径会报404问题，所以需改为相对路径
  base:"./",
  // 路径别名
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      // 组件路径别名,语法：别名：resolve(__dirname,'组件原路径')
      com:resolve(__dirname,'src/component'),
      //静态资源路径别名
      './image':'src/assets'
    }
  }
})

3、步骤三：配置生产环境移除console.log。

TypeScript 复制代码

//在vite.config.ts中
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import{resolve} from 'path'

export default defineConfig({
  //配置根路径，解决部署到服务器之后绝对路径会报404问题，所以需改为相对路径
  base:"./",
  // 路径别名
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      // 组件路径别名,语法：别名：resolve(__dirname,'组件原路径')
      com:resolve(__dirname,'src/component'),
      //静态资源路径别名
      './image':'src/assets'
    }
  },
  // 生产环境移除console.log的配置
  build:{
    // 默认是esbuild,但这里需要改成terser，并且想使用terser的话，需提前安装，命令为npm add -D                         
//terser
    minify:"terser",
    terserOptions: {
        compress: {
          //生产环境时移除console
          drop_console: true,
          drop_debugger: true,
        },
      },
  }
})

4、步骤四：设置代理解决跨域。（使用方法与webpack解决跨域一样）

TypeScript 复制代码

//在vite.config.ts中
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import{resolve} from 'path'

export default defineConfig({
  //配置根路径，解决部署到服务器之后绝对路径会报404问题，所以需改为相对路径
  base:"./",
  server: {
    proxy: {
      // 字符串简写写法，其他方法可看vite官网，使用方法与webpack解决跨域一样
      '/foo': 'baseURL地址',
    }
  },
  // 路径别名
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      // 组件路径别名,语法：别名：resolve(__dirname,'组件原路径')
      com:resolve(__dirname,'src/component'),
      //静态资源路径别名
      './image':'src/assets'
    }
  },
  // 生产环境移除console.log的配置
  build:{
    // 默认是esbuild,但这里需要改成terser，并且想使用terser的话，需提前安装，命令为npm add -D terser
    minify:'terser',
    terserOptions: {
      compress: {
        //生产环境时移除console
        drop_console: true,
        drop_debugger: true,
      },
    },
  }
})

5、打包优化，使用CDN分发。（忽略，后面更新）

TypeScript 复制代码

//安装cdn插件
npm install vite-plugin-cdn-import --save-dev

TypeScript 复制代码

//引入插件，在vite.config.ts中
//import importToCDN from "vite-plugin-cdn-import"
//或
import { Plugin as importToCDN } from "vite-plugin-cdn-import"

6、代码压缩。

TypeScript 复制代码

npm i vite-plugin-compression -D

TypeScript 复制代码

//在vite.config.ts中
import viteCompression from 'vite-plugin-compression'
//在plugins中配置即可
plugins: [
    viteCompression(),
]

7、图片压缩。

TypeScript 复制代码

npm i vite-plugin-imagemin -D

TypeScript 复制代码

//在vite.config.ts中
import viteImagemin from 'vite-plugin-imagemin'
//在plugins下写
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
            }
          ]
        }
      })

8、打包命令配置。

TypeScript 复制代码

//在package.json中
"build": "vite build",