element-plus 手把手带你用vue建后台系列五（打包发布篇）

青柠2022年7月23日大约 5 分钟约 1369 字

完整项目地址：xhwy-v3-ts-elementplus

系列文章：

手把手带你用 vue 建后台系列一（项目介绍篇)

手把手带你用 vue 建后台系列二（权限路由篇)

手把手带你用 vue 建后台系列三（数据可视化篇)

手把手带你用 vue 建后台系列四（实战篇)

前言

教程出到这里已经囊括了一个完整后台大部分的知识点，现在只剩下最后一步---打包发布，也是比较重要的一步，今天就手把手教大家如何打包上线

env环境配置

开发环境和生成环境之下，我们需要变量展示不同的信息

.env.development

.env.production

分别代表开发和生产两种环境的配置

axios之前访问的api是'api',所以我们在.env.development配置

VITE_URL = '/api'

.env.production中配置对应的后端接口

VITE_URL = 'http://106.52.235.252:8101/'

最后在axios.ts中通过import.meta.env.VITE_URL配置不同环境的变量

const axiosInstance = axios.create({
  baseURL:import.meta.env.VITE_URL,
})

因为是ts,如果报无类型,在env.d.ts中配置类型

interface ImportMetaEnv {
  VITE_URL: string
}

网站性能优化

使用

npm run build

即可打包

打包前要确保代码没有报错，不然会打包失败

打包后默认放在dist文件夹中

如果一些chuck很大会保错

解决方法一:
加大限制的大小将500kb改成1000kb或者更大,默认限制红线是500kb
```
build: {
  chunkSizeWarningLimit:1500,
}
```
build.chunkSizeWarningLimit
类型： number
默认： 500
块大小警告的限制（以 kbs 为单位）
解决方法二:
分解块，将大块分解成更小的块
```
rollupOptions: {
  output:{
    manualChunks(id) {
      if (id.includes('node_modules')) {
        return id.toString().split('node_modules/')[1].split('/')
        [0].toString();
      }
    }
  }
}
```
不过这样分解后,你部署的时候就知道会有引入顺序的问题，部署会出错的，上线会提示分割后提示 Cannot access 'S' before initialization,因为部分库会引用相同的依赖，导致最后的引入顺序可能会有问题。不像webpack那样，可以设置优先级以及根据引入次数进行打包,但实际这是只是视觉上的减小，其实他只不过是把大文件拆开来分成很多分了而已,没什么实质性的作用。
我们打包会遇到块包过大的问题,官网提供拆分方案,只是视觉上的减少

什么是gzip

Gzip 是在 Unix 和类 Unix 系统上使用的一种文件格式和软件应用程序，用于在 HTTP 内容提供给客户端,之前对其进行压缩。众所周知，该过程最多可将文件缩小 80%，从而缩短页面加载时间、减少带宽消耗,并减少 SSL 开销（由于SSL 握手期间的往返次数减少）。

与 gzip 相关的文件类型包括：

.gz – 表示由 gzip 算法压缩的文件扩展名。
.tar 文件，tarball – 一种用于存储多个文件以供存档但不用于压缩的格式。Gzip 可用于压缩 .tar 文件。
.tgz、.tar.gz、.gz 文件 – 表示已被 gzip 压缩的 .tar 文件。

优化的目的

最大限度地减少了交付给用户的代码文件的大小，从而显着减少了页面加载时间

如何优化?

这里我们使用vite-plugin-compression

首先是安装

npm i vite-plugin-compression -D

配置

import viteCompression from 'vite-plugin-compression';
plugins: [
  viteCompression()
]

再来使用

npm run build

然后nginx配置下gzip即可

#开启gzip功能
gzip on;
#开启gzip静态压缩功能
gzip_static on;
#gzip缓存大小
gzip_buffers 4 16k;
#gzip http版本
gzip_http_version 1.1;
#gzip 压缩级别 1-10
gzip_comp_level 5;
#gzip 压缩类型
gzip_types text/plain application/javascript text/css application/xml
text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

nginx中配置gzip_static on提示nginx: [emerg] unknown directive “gzip_static“ i

此时可用在nginx的安装目录的sbin中使用./nginx -V查看当前nginx的配置信息，看有没有配置 --with-http_gzip_static_module

通过以上信息中的configure arguments看出我们没有配置该信息。这时需要我们进入原来的nginx解压的目录中，进行配置并重新安装

## 配置
./configure --prefix=/usr/local/nginx --with-http_gzip_static_module
## 重新安装
make && make install

build 配置和nginx配置

vite打包编译上线

nginx配置

build编译打包配置

build: {
  target: 'es2015',
  outDir: 'dist',
  assetsDir: 'assets',
  //小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项。
  assetsInlineLimit: 2048,
  //css代码拆分
  cssCodeSplit: true,
  // Terser 相对较慢，但大多数情况下构建后的文件体积更小。ESbuild 最小化混淆更快但构建后的文件相对更大。
  // 设置为 false 可以禁用最小化混淆，或是用来指定使用哪种混淆器。默认为 Esbuild，它比terser 快 20-40 倍，压缩率只差 1%-2%。
  minify: 'terser',
    terserOptions: {
      compress: {
      // 生产环境去除console
      drop_console: true
      }
    }
}

nginx配置

放到root目录,会看到了403,这是目录没有权限

cd /root
ls -lt
chmod -R 777 el-admin

主要vite需要try_files重定向,否则会报错404 not fount

root /root/el_admin/;
index index.html index.htm;
try_files $uri $uri/ /index.html;

element-plus 手把手带你用vue建后台 系列五（打包发布篇）

前言

env环境配置

网站性能优化

什么是gzip

build 配置和nginx配置

element-plus 手把手带你用vue建后台系列五（打包发布篇）