Teek Design Vue3

主题

Teeker2023-07-20
1010
3.9m
Get...

打包构建 ​

打包命令 ​

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

测试环境打包 ​

sh
pnpm build:test

正式环境打包 ​

sh
pnpm build
# or
pnpm build:prod

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

预览打包效果 ​

项目发布之前可以在本地进行效果预览，执行如下命令：

sh
pnpm preview

打包压缩 ​

Teek 内置打包压缩功能，可以对打包后的静态文件进行 gzip、brotli 压缩，压缩后部署到 nginx 将极大提高网页加载速度。

首先在 .env 文件开启 gzip 压缩。

sh
# 是否开启 gzip 压缩
VITE_BUILD_GZIP = true

然后在 .env.test 或 .env.production 文件里使用了 VITE_COMPRESSION 配置。

VITE_COMPRESSION 有 3 类配置：

  • 不开启压缩
  • 压缩时不删除原始文件 推荐
  • 压缩时删除原始文件

压缩时不删除原始文件 ​

sh
# 不开启压缩，默认
VITE_COMPRESSION = "none"
sh
# 开启 gzip 压缩
VITE_COMPRESSION = "gzip"

# 开启 brotli 压缩
VITE_COMPRESSION = "brotli"

# 同时开启 gzip 与 brotli 压缩
VITE_COMPRESSION = "both"

# 不开启压缩，默认
VITE_COMPRESSION = "none"
sh
# 开启 gzip 压缩，并删除原始文件
VITE_COMPRESSION = "gzip-clear"

# 开启 brotli 压缩，并删除原始文件
VITE_COMPRESSION = "brotli-clear"

# 同时开启 gzip 与 brotli 压缩，并删除原始文件
VITE_COMPRESSION = "both-clear"

请根据需求选择任意一个 VITE_COMPRESSION 的配置，如在测试环境开启 gzip-clear，在生成环境配置 gzip。

sh
# 开启 gzip 压缩，并删除原始文件
VITE_COMPRESSION = "gzip-clear"
sh
# 开启 gzip 压缩
VITE_COMPRESSION = "gzip"

打包内容 ​

Teek 使用 esbuild 和 rollup 进行构建，支持在 .env 文件客针对打包内容进行配置：

sh
# 是否生成包分析文件
VITE_REPORT = false

# 是否开启 gzip 压缩
VITE_BUILD_GZIP = true

# 是否删除生产环境 console
VITE_DROP_CONSOLE = true

Teek 对 Vite 的 build.rollupOptions.output 配置进行优化，打包时对静态资源进行分类，最终得到的打包文件是：

text
dist
├─ static
│ ├─css
│ ├─js
│ ├─png
│ └─svg
│─ favicon.ico
│─ index.html

同时 Teek 使用 postcss 压缩 CSS 文件，并使用 Autoprefixer 插件自动添加各个浏览器前缀，极大的兼容浏览器差异。

部署 ​

将最终生成的静态文件发布到 CDN 或者静态服务器即可。

比如：将 dist 文件夹重命名为 project 并上传到 nginx 服务器 /srv/www 目录下，形成 /srv/www/project 文件夹。

sh
location / {
  # 不缓存 html，防止程序更新后缓存继续生效
  if ($request_filename ~* .*\.(?:htm|html)$) {
    add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
    access_log on;
  }
  # 指定打包文件存放路径
  root   /srv/www/project/;
  index  index.html index.htm;
}

如果访问时发现资源路径不对，则修改对应环境的 env.* 文件的 VITE_PUBLIC_PATH 属性：

sh
# 静态文件获取根路径
# 需要以 / 开头和结尾
VITE_PUBLIC_PATH = "/"
VITE_PUBLIC_PATH = "/xxx/"

此时路由 base 前缀和静态资源路径都按照 VITE_PUBLIC_PATH 属性值生成，如果需要路由 base 前缀和静态资源路径不一致，则进行如下修改：

sh
# 静态文件获取根路径
VITE_PUBLIC_PATH = "/"

# 线上环境路由历史模式，格式为 `模式, base 参数`，模式可配置为 hash 和 history，如果填错或者不填，则默认 history 模式
VITE_ROUTER_MODE = "history, /"

VITE_ROUTER_MODE 属性的第一个参数为路由模式，第二个参数为路由 base 参数。

路由模式 ​

vue-router 提供了两种路由模式：

  • hash 模式：在 URL 后面拼接 # + 路由地址
  • history 模式：一个完整的 URL 地址

VITE_ROUTER_MODE 属性第一个参数为路由模式，可选值为 hash, history，第二个参数是路由 base 参数。

默认情况下，Teek 使用 history 模式，路由 base 默认为 /，你可以在 .env.* 文件中修改。

sh
# # 线上环境路由历史模式，格式为 `模式, base 参数`，模式可配置为 hash 和 history，如果填错或者不填，则默认 history 模式
VITE_ROUTER_MODE = "history, /"