你把 vite打包玩明白

前言：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构建项目配置base

二:路径别名

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

四：引入element-plus组件库 cdn

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

目前尤大大强烈推荐的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({
      //引入vue 插件
      imports: ["vue"],
      dts: "src/auto-import.d.ts",
    }),
    AutoImport({
      //plus按需引入
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      //plus按需引入
      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"),
    },
  },
  // 跨域
  server: {
    //使用IP能访问
    host: "0.0.0.0",
    // 热更新
    hmr: true,
    //设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
    strictPort: false,
    //服务器启动时自动在浏览器中打开应用程序,当此值为字符串时，会被用作 URL 的路径名
    open: "http://localhost:3000",
    //自定义代理规则
    proxy: {
      // 选项写法
      "/api": {
        target: "https://admin.itrustnow.com",
        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的文件，直接去拿，不存在在来压缩，这样是不是把服务器每一次都要压缩的事情，交给客户端了呢？虽然客户端打包进行代码压缩会很慢。但是我们打包只是发布代码的时候打一次包，而服务器是要面对成千上万的人来访问等。说到这里大家应该明白了吧。

六:图片压


cnpm i -d vite-plugin-imagemin
import viteImagemin from 'vite-plugin-imagemin'
plugins[
      viteImagemin({
    gifsicle: {
      optimizationLevel: 7,
      interlaced: false,
    },
    optipng: {
      optimizationLevel: 7,
    },
    webp: {
      quality: 75,
    },
    mozjpeg: {
      quality: 65,
    },
    pngquant: {
      quality: [0.65, 0.9],
      speed: 4,
    },
    svgo: {
      plugins: [
        {
          removeViewBox: false,
        },
        {
          removeEmptyAttrs: false,
        },
      ],
     },
    })
   ]

相关阅读:
1336. 每次访问的交易次数
 【分享】围绕 API 团队协作与自动化测试的实践！
精简docker的导出镜像
 肖sir__设计测试用例方法之因果图07_（黑盒测试）
ADB日常使用命令
 fastjson首字母大写的几种方法
 计算机网络第2章-DNS（3）
【C语言】可变参数列表详解
 树莓 LUMA-OLED.EXAMPLE使用
 网络编程 10.26
原文地址：https://blog.csdn.net/m0_57904695/article/details/126118104

你把 vite打包 玩明白

一：vite构建项目 配置base

二:路径别名

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

四：引入element-plus组件库 cdn

安装命令

引入到vite.config.ts

使用在插件中

下载element-plus

五：代码压缩

六:图片压

你把 vite打包玩明白

一：vite构建项目配置base