打包预览

开始之前

框架中使用基于原生 ES-Module 的前端构建工具 Vite，您可能需要了解 Vite 配置

打包

1. .env 文件

根目录 .env 文件，去了解 .env-文件。/vue-next-admin-preview/ 为预览仓库 vue-next-admin-preview 的仓库名，打包时得根据具体情况进行修改打包路径。

bash

# public path 配置线上环境路径（打包）、本地通过 http-server 访问时，请置空即可
VITE_PUBLIC_PATH = /vue-next-admin-preview/

2. 打包后链接效果

注意看下图 圈起来 红色部分路径。

3. 打包命令

bash

# 项目根目录运行
cnpm run build

# 或者，package.json 中，鼠标放入 build 上点击 `运行脚本`
"scripts": {
  "build": "vite build",
},

预览

1. 本地预览

本地预览必须把：根目录 .env 文件中的 VITE_PUBLIC_PATH 置空

bash

VITE_PUBLIC_PATH = ''

# 或者
VITE_PUBLIC_PATH =

# 或者
VITE_PUBLIC_PATH = /

安装 http-server 插件，或者拖到 HBuilderX 中去

bash

# 安装
cnpm install -g http-server

# 运行，打包后的 dist 文件夹里打开 cmd
http-server

或者在 package.json 中添加脚本

json

"scripts": {
  "dev": "vite --force",
  "build": "vite build",
  "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/",
  "serve": "http-server ./dist"
},

// 项目根目录运行
cnpm run serve

成功代码

bash

λ cnpm run serve

> vue-next-admin@1.2.0 serve C:\Users\Desktop\vue-next-admin
> http-server ./dist

Starting up http-server, serving ./dist

http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://10.111.171.255:8080
  http://127.0.0.1:8080
Hit CTRL-C to stop the server

2. 线上预览

部署到服务器，方法自行前往学习。

其它

1. 分包（manualChunks）

vite.config.ts 中，注意：npm 安装依赖与 cnpm 安装依赖时，build.rollupOptions.output.manualChunks 分包效果会不一致，下图的为 npm 安装依赖时的打包效果。

代码

build: {
  rollupOptions: {
    output: {
      manualChunks(id) {
        if (id.includes('node_modules')) {
          return id.toString().split('node_modules/')[1].split('/')[0].toString();
        }
      },
    },
  },
}

打包效果（npm 安装依赖时的打包效果）

2. gzip 压缩

使用 vite-plugin-compression 插件

安装

bash

npm install vite-plugin-compression --save-dev

使用

vite.config.ts 查看具体配置

import viteCompression from "vite-plugin-compression";

plugins: [viteCompression()];

3. cdn 加速

网络卡，打包后第一次进入还是慢，这里只做部分参考，需要的可自行添加配置。

详细配置文章链接 vue3 + vite 打包 gzip 压缩、cdn 加速

.env 文件，默认为关闭 cdn 加速

bash

# 打包是否开启 cdn（源文件 utils/build.ts），可自行修改
VITE_OPEN_CDN = false

配置 cdn 加速链接

完整列表配置查看/src/utils/build.ts

注意 prodUrl：使用的是 jsdelivr 还是 unpkg。它们的 path 可能不一致，所以下面的 path 你得对应的进行修改

比如：

prodUrl: 为 https://unpkg.com/{name}@{version}/{path} 时，path 为 dist/vue.global.js

path：通过网站 https://unpkg.com/ 进行查询，方法为地址栏输入 https://unpkg.com/${包名} 回车。如：https://unpkg.com/vue

modules: [
  {
    name: "vue",
    var: "Vue",
    path: "dist/vue.global.js",
  },
];

prodUrl: 为 https://cdn.jsdelivr.net/npm/{name}@{version}/{path} 时，path 为 dist/vue.global.min.js

path：通过网站 https://www.jsdelivr.com/ 进行查询

modules: [
  {
    name: "vue",
    var: "Vue",
    path: "dist/vue.global.min.js",
  },
];

打包效果（npm 安装依赖时的打包效果），.env VITE_OPEN_CDN 设置为 true

bash

VITE_OPEN_CDN = true

驰骋流程+表单+低代码

打包预览 ​

打包 ​

1. .env 文件 ​

2. 打包后链接效果 ​

3. 打包命令 ​

预览 ​

1. 本地预览 ​

2. 线上预览 ​

其它 ​

1. 分包（manualChunks） ​

2. gzip 压缩 ​

3. cdn 加速 ​

打包预览

打包

1. .env 文件

2. 打包后链接效果

3. 打包命令

预览

1. 本地预览

2. 线上预览

其它

1. 分包（manualChunks）

2. gzip 压缩

3. cdn 加速