devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

你把 vite打包 玩明白_vite打包配置

作者：羊村懒王 | 2024-02-15 19:56:12

赞

踩

vite打包配置

目录

使用vite 将我的 单文件index.html打包

一：vite构建项目 配置base

 二:路径别名

三：生产环境移除log + 跨域 

vite.config.ts 完整代码：

四：引入element-plus组件库 cdn

安装命令

 引入到vite.config.ts

使用在插件中

下载element-plus

五：代码压缩

六:图片压缩

6.1 五个超强图片处理网站，使用简单，人工智能老照片修复，背景移除，在线抠图，图片压缩！

七：字蛛 字体压缩 字体在vue项目中使用

 八 ： package.json

前言：webpack 打包看这里

（移动端打包）一步一步,一步 从代码到,打包成为手机App,上传至nginx服务器 (Vue项目)_0.活在风浪里的博客-CSDN博客_移动端打包成app一步一步,一步 从代码到,打包成为手机App,上传至ngnix服务器 (Vue项目)https://blog.csdn.net/m0_57904695/article/details/122500485?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165940900116782184626956%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165940900116782184626956&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-122500485-null-null.nonecase&utm_term=%E6%89%93%E5%8C%85&spm=1018.2226.3001.4450手写一个服务器代码将 《vue电商后台管理系统》部署上去 上线、打包_0.活在风浪里的博客-CSDN博客亲测可用，一定会收获颇多，1.上线vue电商后台管理项目2.手写搭建服务器并挂载 （node）3.打包优化 完成上线https://blog.csdn.net/m0_57904695/article/details/122977868?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165940900116782184626956%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165940900116782184626956&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-3-122977868-null-null.nonecase&utm_term=%E6%89%93%E5%8C%85&spm=1018.2226.3001.4450

 哎，真慢，你知道我在说啥，开发中启动一下项目抽根烟回来就启动开了，常规操作基操勿六

目前尤大大强烈推荐的vite，如何？一个字，真的好快！念及此，解释打包配置，不在说官方文字

此博文将以一种几近聊天的方式来学会打包，第一次打包的小伙伴也可以一遍懂一遍成，不多说，开始了

番外

使用vite 将我的 单文件index.html打包

首先，在项目根目录下创建一个名为 index.html 的文件，并在其中编写你的 HTML 代码。然后，使用以下命令安装 vite：

npm install vite --save-dev

安装完成后，在 package.json 文件中添加以下脚本命令：

  1. {
  2. 	"scripts": {
  3. 		"dev": "vite --open --port 3009",
  4. 		"build": "vite build"
  5. 	  },
  6. 	"devDependencies": {
  7. 		"vite": "^4.3.9"
  8. 	}
  9. }

接下来，在终端中执行以下命令启动开发服务器：

npm run dev

开发服务器启动成功后，你可以在浏览器中访问 http://localhost:3009/index.html 来查看你的网页。

当你完成了网页的开发并想要打包发布时，执行以下命令生成打包文件：

npm run build

打包文件会生成在项目根目录下的 dist 文件夹中，其中包括打包后的 index.html 文件和其他需要的文件。

基于此，您已经完成最简单的使用过程，念及此下面配置 VUE3 + TS + VITE

一：vite构建项目 配置base

 

 

 

 

 

 

好了，在以上你构建了vite，并配置了最简单的操作后，你准备配置vite.confing.ts 

 开发环境下我们的图片位置在/src,ok，本地没问题正常显示，你打了个包 (npm run build),然后又运行了npm脚本preview，

也没问题，但是在一些服务器上，使用绝对目录会导致404，所以我们需要配置为相对目录 

 

 

 二:路径别名

  •  先引入path，在配置， 注意一定不要随意命名，a b c这样的，项目的目录也不能为关键字保留字！！

 

  1. import { resolve } from "path";
  2.  
  3.  resolve: {
  4.     alias: {
  5.       "@": resolve(__dirname, "src"),
  6.       // 注意一定不要随意命名，a b c这样的，项目的目录也不能为关键字保留字！！
  7.       "comp": resolve(__dirname, "src/components"),
  8.       // 配置图片要这样引用
  9.       "/img": "./src/assets",
  10.     },
  11.   },

路径别名和自动引入注意事项

三：生产环境移除log + 跨域 

  1.   build: {
  2.     minify: "terser",
  3.     terserOptions: {
  4.       compress: {
  5.         //生产环境时移除console
  6.         drop_console: true,
  7.         drop_debugger: true,
  8.       },
  9.     },
  10.   },

vite.config.ts 完整代码：

  1. import { defineConfig } from "vite";
  2. import AutoImport from "unplugin-auto-import/vite";
  3. import Components from "unplugin-vue-components/vite";
  4. import vue from "@vitejs/plugin-vue";
  5. import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
  6. import path from "path";
  7.  
  8. export default defineConfig({
  9.   plugins: [
  10.     vue(),
  11.     //引入vue 插件
  12.     AutoImport({
  13.       imports: ["vue"],
  14.       dts: "src/auto-import.d.ts",
  15.     }),
  16.     //plus按需引入
  17.     AutoImport({
  18.       resolvers: [ElementPlusResolver()],
  19.     }),
  20.     //plus按需引入
  21.     Components({
  22.       resolvers: [ElementPlusResolver()],
  23.     }),
  24.   ],
  25.   build: {
  26.     minify: "terser",
  27.     terserOptions: {
  28.       compress: {
  29.         //生产环境时移除console
  30.         drop_console: true,
  31.         drop_debugger: true,
  32.       },
  33.     },
  34.   },
  35.  
  36.   resolve: {
  37.     //配置根路径别名： import('@/pages/login/login.vue')
  38.     alias: {
  39.       "@": path.resolve(__dirname, "src"), 
  40.       // 注意一定不要随意命名，a b c这样的，项目的目录也不能为关键字保留字！！
  41.       "comp": resolve(__dirname, "src/components"),
  42.       // 配置图片要这样引用
  43.       "/img": "./src/assets",
  44.     },
  45.   },
  46.   // 跨域
  47.   server: {
  48.     //使用IP能访问
  49.     host: "0.0.0.0",
  50.     // 热更新
  51.     hmr: true,
  52.     //设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
  53.     strictPort: false,
  54.     //自定义代理规则
  55.     proxy: {
  56.       // 选项写法
  57.       "/api": {
  58.         target: "https://admin.itrustnow.com",
  59.         // target: "http://192.168.0.50:8083",
  60.         changeOrigin: true,
  61.         rewrite: (path) => path.replace(/^\/api/, ""),
  62.       },
  63.     },
  64.   },
  65. });

四：引入element-plus组件库 cdn

官网建议使用按需引入，但是它在解析使用到的组件时也很慢，所以建议使用cdn

安装命令

cnpm i vite-plugin-cdn-import --save-dev

 引入到vite.config.ts

import importToCDN, { autoComplete } from "vite-plugin-cdn-import";

使用在插件中

  1.  plugins: [
  2.     vue(), //vue
  3.     AutoImport({
  4.       //自动引入vue组件 插件
  5.       imports: ["vue"],
  6.       dts: "src/auto-import.d.ts",
  7.     }),
  8.     //plus按需引入
  9.     // AutoImport({
  10.     //   resolvers: [ElementPlusResolver()],
  11.     // }),
  12.     // Components({
  13.     //   resolvers: [ElementPlusResolver()],
  14.     // }),
  15.     importToCDN({
  16.       modules: [
  17.         {
  18.           name: "vue",
  19.           var: "Vue",
  20.           path: "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.global.prod.min.js",
  21.         },
  22.         {
  23.           name: "vuex",
  24.           var: "Vuex",
  25.           path: "https://cdnjs.cloudflare.com/ajax/libs/vuex/4.0.2/vuex.global.prod.min.js",
  26.         },
  27.         {
  28.           name: "vue-router",
  29.           var: "VueRouter",
  30.           path: "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.12/vue-router.global.prod.min.js",
  31.         },
  32.         {
  33.           // 引入cdn element-plus
  34.           name: "element-plus",
  35.           var: "ElementPlus",
  36.           path: "https://unpkg.com/element-plus",
  37.           css: "https://unpkg.com/element-plus/dist/index.css",
  38.         },
  39.       ],
  40.     }),
  41.   ],

下载element-plus

  • vite-plugin-cdn-import这个插件是专门打包发布阶段使用的，开发阶段并没有什么用，所以开发阶段我们该怎么引入npm包就怎么引入，该在项目中怎么使用vuex、vue-router就怎么使用就好了
  • 需要注意的是，开发环境使用本地的npm包，cdn是打包时候才生效的。

 一种简单的方法，就是你全局引入，注释掉plus 的css文件，因为cdn已经引入了，npm run build然后再去看dist/index.html，里面已经引入了cdn链接，并且vue、vuex、vue-router、plus这些库没有被打包进你的本地包中。

yarn add element-plus
  1. // main.ts
  2. import { createApp } from 'vue'
  3. import ElementPlus from 'element-plus'
  4. //import 'element-plus/dist/index.css' 
  5. import App from './App.vue'
  6.  
  7. const app = createApp(App)
  8.  
  9. app.use(ElementPlus)
  10. app.mount('#app')

五：代码压缩

安装

cnpm i vite-plugin-compression -D

引入 

import viteCompression from "vite-plugin-compression";

 使用

  1.  plugins: [
  2.    
  3.     viteCompression(),
  4.  
  5.   ],

 nginx服务端需要配置

没错，这里nginx 也要配置， 配置启动gzip模块， 然后优先使用本地压缩好的文件。 

前端配置gzip压缩 

为啥要客户端生成呢？ 问得好， 我们知道服务端生成是不是每一次请求都要去请求服务器，然后服务器来生成压缩包。服务器每一次生成压缩包是不是会不会浪费服务端的性能哇！， 如果客户端生成，服务端先判断是否存在的后缀名为zip的文件，直接去拿，不存在在来压缩，这样是不是把服务器每一次都要压缩的事情，交给客户端了呢？ 虽然客户端打包进行代码压缩会很慢。 但是我们打包只是发布代码的时候打一次包，而服务器是要面对成千上万的人来访问等。 说到这里大家应该明白了吧。
 

六:图片压缩

没压缩前效果：

 用ps打开 shift + alt + ctrl + s 保存

 压缩后大小

6.1 五个超强图片处理网站，使用简单，人工智能老照片修复，背景移除，在线抠图，图片压缩！

AI人工智能图片放大：https://bigjpg.com/

人工智能老照片无损修复：https://jpghd.com/

超级橡皮擦：https://remover.zmo.ai/

免费在线抠图神器：https://picwish.cn/

老牌在线图片压缩工具：https://tinypng.com/

七：字蛛 字体压缩 字体在vue项目中使用

1. 在根目录下将后缀为ttf的字体包放进去 

2. 在根目录index.html中配置字体别名 （别名要和字体包名称一样）

  1.  
  2.   @font-face {
  3.       /* 注意重命名字体名称要和字体包名称一样*/
  4.       font-family: "Alibaba-PuHuiTi-Regular";
  5.       /* 必须使用相对路径 不然字蛛压缩报错 web fond font*/
  6.       src: url("./Alibaba-PuHuiTi-Regular.ttf") format("truetype");
  7.       font-weight: normal;
  8.       font-style: normal;
  9.     }

多个字体，复制多份不用在新建文件  font-family是别名 src是路径

3. 在index.html中创建盒容器包裹要用到的字体

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <link rel="icon" href="/favicon.ico" />
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.   <title>vite</title>
  9.   <meta name="description" content="xxxx">
  10.   <meta name="keywords" content="xxxx">
  11.   <style>
  12.     @font-face {
  13.       font-family: "Alibaba-PuHuiTi-Light";
  14.       src: url("./Alibaba-PuHuiTi-Light.ttf") format("truetype");
  15.       font-weight: normal;
  16.       font-style: normal;
  17.     }
  18.  
  19.     @font-face {
  20.       font-family: "Alibaba-PuHuiTi-Medium";
  21.       src: url("./Alibaba-PuHuiTi-Medium.ttf") format("truetype");
  22.       font-weight: normal;
  23.       font-style: normal;
  24.     }
  25.  
  26.     @font-face {
  27.       font-family: "Alibaba-PuHuiTi-Regular";
  28.       /* 必须使用相对路径 不然字蛛压缩报错 web fond font*/
  29.       src: url("./Alibaba-PuHuiTi-Regular.ttf") format("truetype");
  30.       font-weight: normal;
  31.       font-style: normal;
  32.     }
  33.  
  34.     /* 跟你要压缩的地方类名需要相同 */
  35.     .title {
  36.       /* vue是单页面应用所以弊端就是他会显示到你的页面上 */
  37.       /* 隐藏了之后，所有的title类名都会隐藏，要在真正显示的地方加上display:block使其显示 */
  38.       display: none;
  39.       font-family: "Alibaba-PuHuiTi-Regular";
  40.     }
  41.   </style>
  42. </head>
  43.  
  44. <body>
  45.   <div class="title">
  46.     要压缩的字,让优秀成为一种习惯！
  47.   </div>
  48.   <script type="module" src="/src/main.ts"></script>
  49.   <div id="app"></div>
  50. </body>
  51.  
  52. </html>

下载字蛛，全局安装 压缩爬取字体 (需要先安装node) 

cnpm install font-spider -g

安装完毕，检查是否安装成功可以，font-spider  -V，查看版本，显示如下说明安装成功

font-spider  -V

4. 使用行命令font-spider index.html

font-spider index.html

5.  在页面使用字体 

  1. <template>
  2.   <div class="title">让优秀成为一种习惯</div>
  3.   <div class="content">让优秀成为一种习惯</div>
  4. </template>
  5. <script setup></script>
  6. <style lang="scss" scoped>
  7. .title {
  8.     /* 因为项目根目录index.html中设置了相同类名display: none;了，这里要用到所以要 display: block; */
  9. block;
  10.   display: block;
  11. }
  12. </style>

6.新加入的字体或者更换其他字体需要重新执行压缩命令 !!! 

font-spider index.html

  

重新启动项目 

npm dev

字蛛压缩项目模板点这里 声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】

推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。