你把 vite打包玩明白

置顶彩色之外

已于 2023-06-13 11:31:04 修改

阅读量1.8w

点赞数 26

分类专栏： vite 文章标签： vue.js 前端 javascript vite 打包

于 2022-08-02 19:05:22 首次发布

CSDN-@活在风浪里001

本文链接：https://blog.csdn.net/m0_57904695/article/details/126118104

版权

vite 专栏收录该内容

2 篇文章 2 订阅

订阅专栏

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

四：引入element-plus组件库 cdn

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 文件中添加以下脚本命令：

{
	"scripts": {
		"dev": "vite --open --port 3009",
		"build": "vite build"
	  },
	"devDependencies": {
		"vite": "^4.3.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这样的，项目的目录也不能为关键字保留字！！

import { resolve } from "path";

 resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
      // 注意一定不要随意命名，a b c这样的，项目的目录也不能为关键字保留字！！
      "comp": resolve(__dirname, "src/components"),
      // 配置图片要这样引用
      "/img": "./src/assets",
    },
  },

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

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

  build: {
    minify: "terser",
    terserOptions: {
      compress: {
        //生产环境时移除console
        drop_console: true,
        drop_debugger: true,
      },
    },
  },

vite.config.ts 完整代码：

import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import vue from "@vitejs/plugin-vue";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import path from "path";

export default defineConfig({
  plugins: [
    vue(),
    //引入vue 插件
    AutoImport({
      imports: ["vue"],
      dts: "src/auto-import.d.ts",
    }),
    //plus按需引入
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    //plus按需引入
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  build: {
    minify: "terser",
    terserOptions: {
      compress: {
        //生产环境时移除console
        drop_console: true,
        drop_debugger: true,
      },
    },
  },

  resolve: {
    //配置根路径别名： import('@/pages/login/login.vue')
    alias: {
      "@": path.resolve(__dirname, "src"), 
      // 注意一定不要随意命名，a b c这样的，项目的目录也不能为关键字保留字！！
      "comp": resolve(__dirname, "src/components"),
      // 配置图片要这样引用
      "/img": "./src/assets",
    },
  },
  // 跨域
  server: {
    //使用IP能访问
    host: "0.0.0.0",
    // 热更新
    hmr: true,
    //设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
    strictPort: false,
    //自定义代理规则
    proxy: {
      // 选项写法
      "/api": {
        target: "https://admin.itrustnow.com",
        // target: "http://192.168.0.50:8083",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

四：引入element-plus组件库 cdn

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

安装命令

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

引入到vite.config.ts

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

使用在插件中

 plugins: [
    vue(), //vue
    AutoImport({
      //自动引入vue组件 插件
      imports: ["vue"],
      dts: "src/auto-import.d.ts",
    }),
    //plus按需引入
    // AutoImport({
    //   resolvers: [ElementPlusResolver()],
    // }),
    // Components({
    //   resolvers: [ElementPlusResolver()],
    // }),
    importToCDN({
      modules: [
        {
          name: "vue",
          var: "Vue",
          path: "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.global.prod.min.js",
        },
        {
          name: "vuex",
          var: "Vuex",
          path: "https://cdnjs.cloudflare.com/ajax/libs/vuex/4.0.2/vuex.global.prod.min.js",
        },
        {
          name: "vue-router",
          var: "VueRouter",
          path: "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.12/vue-router.global.prod.min.js",
        },
        {
          // 引入cdn element-plus
          name: "element-plus",
          var: "ElementPlus",
          path: "https://unpkg.com/element-plus",
          css: "https://unpkg.com/element-plus/dist/index.css",
        },
      ],
    }),
  ],

下载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

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
//import 'element-plus/dist/index.css' 
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

五：代码压缩

安装

cnpm i vite-plugin-compression -D

引入

import viteCompression from "vite-plugin-compression";

使用

 plugins: [
   
    viteCompression(),

  ],

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中配置字体别名（别名要和字体包名称一样）


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

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

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>vite</title>
  <meta name="description" content="xxxx">
  <meta name="keywords" content="xxxx">
  <style>
    @font-face {
      font-family: "Alibaba-PuHuiTi-Light";
      src: url("./Alibaba-PuHuiTi-Light.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: "Alibaba-PuHuiTi-Medium";
      src: url("./Alibaba-PuHuiTi-Medium.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: "Alibaba-PuHuiTi-Regular";
      /* 必须使用相对路径 不然字蛛压缩报错 web fond font*/
      src: url("./Alibaba-PuHuiTi-Regular.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
    }

    /* 跟你要压缩的地方类名需要相同 */
    .title {
      /* vue是单页面应用所以弊端就是他会显示到你的页面上 */
      /* 隐藏了之后，所有的title类名都会隐藏，要在真正显示的地方加上display:block使其显示 */
      display: none;
      font-family: "Alibaba-PuHuiTi-Regular";
    }
  </style>
</head>

<body>
  <div class="title">
    要压缩的字,让优秀成为一种习惯！
  </div>
  <script type="module" src="/src/main.ts"></script>
  <div id="app"></div>
</body>

</html>

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

cnpm install font-spider -g

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

font-spider  -V

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

font-spider index.html

5. 在页面使用字体

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

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

font-spider index.html

重新启动项目

npm dev

字蛛压缩项目模板点这里 👇资源https://download.csdn.net/download/m0_57904695/86339106

7 五大注意点

1 font-spider主要依据ttf格式的文件来进行分析压缩的，所以font-face的路径必须存在ttf格式的，其他格式不行。设计师的字体大部分都是网上下载的，可以找设计师要字体包的名字，然后通过这个网站字客网去找对应的ttf，下载～

2 引入路径要使用相对路径，
否则会报 Web Font was not found

3 font-spider 仅适用于固定文本，如果文字内容为动态可变的，新增的文字将无法显示为特殊字体。解决办法是删除压缩后的，将备份出来的还原，重新压缩。

font-spider xxx.html 如果不添加options，会默认备份原文件。
font-spider会将页面依赖的字体将会自动压缩好，原 .ttf 字体会备份

4 这个报错就是Quarto A没有对应字体包，我查过这个字体是类似于base64那样形式的字体，所以不存在引入文件。
所以如果不想压缩某个字体包的话，就先注释其font-face。

5 一旦压缩一次后，再压缩别的是没用的。

比如说，我在一个文件夹里压缩了字体，然后生成了新的字体包，我又在另一个文件夹里压缩字体，这两个文件夹的字体共用一个字体包和font-face，所以再次压缩的就是上一个压缩字体包进行压缩的，所以导致页面中有的字体没有转化过来。

解决办法：一个命令行压缩所有
 font-spider file1/*.html file2/*.html file3/*.html
这样即可，*.html代表通配符，分析所有html格式的文件，多个文件就直接在后面加上。

我最大的坑就是这个，没仔细看官方文档，认为只能一次性，浪费了好多时间 wtm

八： package.json

"scripts": {
    "dev": "vite --open",
    "test": "vite --mode test",
    "prod": "vite --mode production",
    "build": "vite build",
    "preview": "vite preview --open",
    "build:dev": "vite build --mode development",
    "build:test": "vite build --mode test",
    "build:zhongri": "vite build --mode zhongri",
    "build:jg": "vite build --mode jg",
    "build:testjg": "vite build --mode testjg",
    "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
  },

比如说：后台自动化打包，让你配置不同环境打出不同包，简单来有 jg、testjg、hg三个域名，执行不同命令走不同接口

第一种：

配置package.json,在新建对应的.env文件，运行不同的打包命令则打出不同接口的包，因为封装axios时用的就是import.meta.env.VITE_API_URL，动态获取.env的值

package.json

命令：npm run build

.env.production

package.json

命令：npm run build:jg

.env.jg

package.json

打包命令testjg：npm run build:testjg

.env.testjg

当然了不同项目不同写法，这只是一种，下面是我公司官网的环境配置，但是这样不好配置线上多个同步地址

第二种：

vite.config.ts

配置环境变量，

彩色之外

关注

26
点赞
踩
153

收藏

觉得还不错? 一键收藏
打赏
7
评论
你把 vite打包玩明白

webpack 打包看这里（移动端打包）一步一步,一步从代码到,打包成为手机App,上传至nginx服务器 (Vue项目)_0.活在风浪里的博客-CSDN博客_移动端打包成app一步一步,一步从代码到,打包成为手机App,上传至ngnix服务器 (Vue项目)手写一个服务器代码将《vue电商后台管理系统》部署上去上线、打包_0.活在风浪里的博客-CSDN博客亲测可用，一定会收获颇多，1.上线vue电商后台管理项目2.手写搭建服务器并挂载（node）3.打包优化完成上线。.............
复制链接

扫一扫