ToB企服应用市场:ToB评测及商务社交产业平台

标题: Vue3+vite打包设置及部分打包优化~ [打印本页]
作者: 耶耶耶耶耶    时间: 2024-8-14 05:07
标题: 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4