vite配置

# vite配置

# package.json

// 配置--open 会自动打开
// vue-tsc 打包会做一个检查
"dev": "vite --open" 
"build": "vue-tsc && vite build",

1
2
3
4

vue.config.ts
base: './'
resolve: {
}
打包的时候去掉console.log()
build: {
    minify: 'terser',
    terserOptions: {
        compress: {
            // 生产环境
            drop_console: true,
            drop_debugger: true
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 配置mock

pnpm add vite-plugin-mock -D
import { viteMockServe } from 'vite-plugin-mock'

viteMockServe({
        // default
        mockPath: 'mock',
        enable: true,
}),

1
2
3
4
5

pnpm i mockjs
import { mock } from 'mockjs'

# 配置代码压缩

pnpm i vite-plugin-compression -D
import viteCompression from 'vite-plugin-compression';
plugins: [viteCompression()],

1
2
3

# 图片打包配置

pnpm i vite-plugin-imagemin -D
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,
            },
          ],
        },
      }),
    ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

上次更新: 2024/04/26, 0:04:00

← react-router的使用 vue2实战 →