构建&部署

::: tip 前言 由于是展示项目，所以打包后可能较大，如果项目中没有用到的插件，可以删除对应的文件或者路由，不引用即可，没有引用就不会打包。 :::

构建

项目开发完成之后，执行以下命令进行构建

  1. yarn build

构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件

旧版浏览器兼容

在 .env.production 内

设置 VITE_LEGACY=true 即可打包出兼容旧版浏览器的代码

  1. VITE_LEGACY = true

预览

发布之前可以在本地进行预览，有多种方式，这里介绍两种

不能直接打开构建后的 html 文件

  • 使用项目自定的命令进行预览(推荐)
  1. # 先打包在进行预览
  2. yarn preview
  3. # 直接预览本地 dist 文件目录
  4. yarn preview:dist
  • 本地服务器预览(通过 live-server)
  1. # 1.全局安装live-server
  2. yarn global add live-server
  3. # 2. 进入打包的后目录
  4. cd ./dist
  5. # 本地预览，默认端口8080
  6. live-server
  7. # 指定端口
  8. live-server --port 9000

分析构建文件体积

如果你的构建文件很大，可以通过项目内置 rollup-plugin-analyzer 插件进行代码体积分析，从而优化你的代码。

  1. yarn report

运行之后，在自动打开的页面可以看到具体的体积分布，以分析哪些依赖有问题。

::: tip

左上角可以切换 显示 gzip 或者 brotli

:::

构建&部署 - 图1

压缩

开启 gzip 压缩

开启 gzip，并配合 nginx 的 gzip_static 功能可以大大加快页面访问速度

::: tip

只需开启 VITE_BUILD_COMPRESS='gzip' 即可在打包的同时生成 .gz 文件

:::

  1. # 根据自己路径来配置更改
  2. # 例如部署在nginx /next/路径下  则VITE_PUBLIC_PATH=/next/
  3. VITE_PUBLIC_PATH=/

开启 brotli 压缩

brotli 是比 gzip 压缩率更高的算法，可以与 gzip 共存不会冲突，需要 nginx 安装指定模块并开启即可。

::: tip

只需开启 VITE_BUILD_COMPRESS='brotli' 即可在打包的同时生成 .br 文件

:::

  1. # 根据自己路径来配置更改
  2. # 例如部署在nginx /next/路径下  则VITE_PUBLIC_PATH=/next/
  3. VITE_PUBLIC_PATH=/

同时开启 gzip 与 brotli

只需开启 VITE_BUILD_COMPRESS='brotli,gzip' 即可在打包的同时生成 .gz 和 .br 文件。

gzip 与 brotli 在 nginx 内的配置

  1. http {
  2.   # 开启gzip
  3.   gzip on;
  4.   # 开启gzip_static
  5.   # gzip_static 开启后可能会报错，需要安装相应的模块, 具体安装方式可以自行查询
  6.   # 只有这个开启，vue文件打包的.gz文件才会有效果，否则不需要开启gzip进行打包
  7.   gzip_static on;
  8.   gzip_proxied any;
  9.   gzip_min_length 1k;
  10.   gzip_buffers 4 16k;
  11.   #如果nginx中使用了多层代理 必须设置这个才可以开启gzip。
  12.   gzip_http_version 1.0;
  13.   gzip_comp_level 2;
  14.   gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  15.   gzip_vary off;
  16.   gzip_disable "MSIE [1-6]\.";
  18.   # 开启 brotli压缩
  19.   # 需要安装对应的nginx模块,具体安装方式可以自行查询
  20.   # 可以与gzip共存不会冲突
  21.   brotli on;
  22.   brotli_comp_level 6;
  23.   brotli_buffers 16 8k;
  24.   brotli_min_length 20;
  25.   brotli_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript image/svg+xml;
  26. }

部署

::: danger 注意

项目默认是在生产环境开启 Mock，这样做非常不好，只是为了演示环境有数据，不建议在生产环境使用 Mock，而应该使用真实的后台接口，并将 Mock 关闭。

:::

发布

简单的部署只需要将最终生成的静态文件，dist 文件夹的静态文件发布到你的 cdn 或者静态服务器即可，需要注意的是其中的 index.html 通常会是你后台服务的入口页面，在确定了 js 和 css 的静态之后可能需要改变页面的引入路径。

例如上传到 nginx

/srv/www/project/index.html

  1. # nginx配置
  2. location / {
  3.   # 不缓存html，防止程序更新后缓存继续生效
  4.   if ($request_filename ~* .*\.(?:htm|html)$) {
  5.     add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
  6.     access_log on;
  7.   }
  8.   # 这里是vue打包文件dist内的文件的存放路径
  9.   root   /srv/www/project/;
  10.   index  index.html index.htm;
  11. }

部署时可能会发现资源路径不对，只需要修改.env.production文件即可。

  1. # 根据自己路径来配置更改
  2. # 注意需要以 / 开头和结尾
  3. VITE_PUBLIC_PATH=/
  4. VITE_PUBLIC_PATH=/xxx/

前端路由与服务端的结合

项目前端路由使用的是 vue-router，所以你可以选择两种方式：history 和 hash。

  • hash 默认会在 url 后面拼接#
  • history 则不会，不过 history 需要服务器配合

可在 src/router/index.ts 内进行 mode 修改

  1. import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
  3. createRouter({
  4.   history: createWebHashHistory(),
  5.   // or
  6.   history: createWebHistory(),
  7. });

history 路由模式下服务端配置

开启 history 模式需要服务器配置，更多的服务器配置详情可以看 history-mode

这里以 nginx 配置为例

部署到根目录

  1. server {
  2.   listen 80;
  3.   location / {
  4.     # 用于配合 History 使用
  5.     try_files $uri $uri/ /index.html;
  6.   }
  7. }

部署到非根目录

  1. 首先需要在打包的时候更改配置
  1. # 在.env.production内，配置子目录路径
  2. VITE_PUBLIC_PATH = /sub/
  1. server {
  2.     listen       80;
  3.     server_name  localhost;
  4.     location /sub/ {
  5.       # 这里是vue打包文件dist内的文件的存放路径
  6.       alias   /srv/www/project/;
  7.       index index.html index.htm;
  8.       try_files $uri $uri/ /sub/index.html;
  9.     }
  10. }

使用 nginx 处理跨域

使用 nginx 处理项目部署后的跨域问题

  1. 配置前端项目接口地址
  1. # 在.env.production内，配置接口地址
  2. VITE_GLOB_API_URL=/api
  1. 在 nginx 配置请求转发到后台
  1. server {
  2.   listen       8080;
  3.   server_name  localhost;
  4.   # 接口代理，用于解决跨域问题
  5.   location /api {
  6.     proxy_set_header Host $host;
  7.     proxy_set_header X-Real-IP $remote_addr;
  8.     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  9.     # 后台接口地址
  10.     proxy_pass http://110.110.1.1:8080/api;
  11.     proxy_redirect default;
  12.     add_header Access-Control-Allow-Origin *;
  13.     add_header Access-Control-Allow-Headers X-Requested-With;
  14.     add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
  15.   }
  16. }