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

这里先容的是vite项目标打包设置，若想了解webpack打包设置可看我的其他博客。（下面来先容下vite打包设置的步骤）
1、步骤一：设置base。(为什么需要设置base？这里设置base主要是修改根路径，一般我们在开发情况中引用静态资源可能使用的是绝对路径，但是一旦打包摆设到服务器上后可能会报404,无法正确的获取的资源。)

1. //在vite.config.ts中
2. import { defineConfig } from 'vite'
4. export default defineConfig({
5. //配置根路径，解决部署到服务器之后绝对路径会报404问题，所以需改为相对路径
6.   base:"./",
7. })

复制代码

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

1. //在vite.config.ts中
2. import { fileURLToPath, URL } from 'node:url'
3. import { defineConfig } from 'vite'
4. //配置组件路径别名需引入resolve
5. import{resolve} from 'path'
7. export default defineConfig({
8.   //配置根路径，解决部署到服务器之后绝对路径会报404问题，所以需改为相对路径
9.   base:"./",
10.   // 路径别名
11.   resolve: {
12.     alias: {
13.       '@': fileURLToPath(new URL('./src', import.meta.url)),
14.       // 组件路径别名,语法：别名：resolve(__dirname,'组件原路径')
15.       com:resolve(__dirname,'src/component'),
16.       //静态资源路径别名
17.       './image':'src/assets'
18.     }
19.   }
20. })

复制代码

3、步骤三：设置生产情况移除console.log。

1. //在vite.config.ts中
2. import { fileURLToPath, URL } from 'node:url'
3. import { defineConfig } from 'vite'
4. import{resolve} from 'path'
6. export default defineConfig({
7.   //配置根路径，解决部署到服务器之后绝对路径会报404问题，所以需改为相对路径
8.   base:"./",
9.   // 路径别名
10.   resolve: {
11.     alias: {
12.       '@': fileURLToPath(new URL('./src', import.meta.url)),
13.       // 组件路径别名,语法：别名：resolve(__dirname,'组件原路径')
14.       com:resolve(__dirname,'src/component'),
15.       //静态资源路径别名
16.       './image':'src/assets'
17.     }
18.   },
19.   // 生产环境移除console.log的配置
20.   build:{
21.     // 默认是esbuild,但这里需要改成terser，并且想使用terser的话，需提前安装，命令为npm add -D                        
22. //terser
23.     minify:"terser",
24.     terserOptions: {
25.         compress: {
26.           //生产环境时移除console
27.           drop_console: true,
28.           drop_debugger: true,
29.         },
30.       },
31.   }
32. })

复制代码

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

1. //在vite.config.ts中
2. import { fileURLToPath, URL } from 'node:url'
3. import { defineConfig } from 'vite'
4. import{resolve} from 'path'
6. export default defineConfig({
7.   //配置根路径，解决部署到服务器之后绝对路径会报404问题，所以需改为相对路径
8.   base:"./",
9.   server: {
10.     proxy: {
11.       // 字符串简写写法，其他方法可看vite官网，使用方法与webpack解决跨域一样
12.       '/foo': 'baseURL地址',
13.     }
14.   },
15.   // 路径别名
16.   resolve: {
17.     alias: {
18.       '@': fileURLToPath(new URL('./src', import.meta.url)),
19.       // 组件路径别名,语法：别名：resolve(__dirname,'组件原路径')
20.       com:resolve(__dirname,'src/component'),
21.       //静态资源路径别名
22.       './image':'src/assets'
23.     }
24.   },
25.   // 生产环境移除console.log的配置
26.   build:{
27.     // 默认是esbuild,但这里需要改成terser，并且想使用terser的话，需提前安装，命令为npm add -D terser
28.     minify:'terser',
29.     terserOptions: {
30.       compress: {
31.         //生产环境时移除console
32.         drop_console: true,
33.         drop_debugger: true,
34.       },
35.     },
36.   }
37. })

复制代码

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

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

复制代码

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

复制代码

6、代码压缩。

1. npm i vite-plugin-compression -D

复制代码

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

复制代码

7、图片压缩。

1. npm i vite-plugin-imagemin -D

复制代码

1. //在vite.config.ts中
2. import viteImagemin from 'vite-plugin-imagemin'
3. //在plugins下写
4. viteImagemin({
5.         gifsicle: {
6.           optimizationLevel: 7,
7.           interlaced: false
8.         },
9.         optipng: {
10.           optimizationLevel: 7
11.         },
12.         mozjpeg: {
13.           quality: 20
14.         },
15.         pngquant: {
16.           quality: [0.8, 0.9],
17.           speed: 4
18.         },
19.         svgo: {
20.           plugins: [
21.             {
22.               name: 'removeViewBox'
23.             },
24.             {
25.               name: 'removeEmptyAttrs',
26.               active: false
27.             }
28.           ]
29.         }
30.       })

复制代码

8、打包下令设置。

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。