Tomcat 部署 Vant2-UI 官方文档

Ayou 收录于技术

2022-11-16 2022-11-16 约 400 字预计阅读 1 分钟 - 次阅读

警告

本文最后更新于 2022-11-16，文中内容可能已过时。

提前需要准备的东西
Tomcat
VantUI 2.x
NodeJS/NPM
Git

操作步骤

首先使用 Git 将源代码下载至本地

1
2
git clone https://github.com/youzan/vant.git		# Github
git clone https://gitee.com/vant-contrib/vant.git	# 码云镜像 

进入 vant 目录，切换 2.x 分支

1
2
cd vant
git checkout 2.x

安装依赖

1
2
3
npm install -g yarn	# 安装 yarn
yarn config set registry https://registry.npm.taobao.org	# 设置源
yarn	# 下载依赖

配置

package.json

依赖下载完之后需要修改 package.json 文件，加入一个新的脚本 build:site

1
2
3
  "scripts": {
    "build:site": "vant-cli build-site"
  }

vant.config.js

然后修改 vant.config.js 中的 publicPath 为 /vant-ui/

1
2
3
    site: {
      publicPath: process.env.PUBLIC_PATH || '/vant-ui/',
    }

打包

修改文件后保存，开始打包文档代码,打包好的文件保存在 site 目录中

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
[root@VM-4-9-centos vant]# npm run build:site

> vant@2.12.52 build:site
> vant-cli build-site


✔ Vant Cli
  Compiled successfully in 20.30s

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Tomcat 部署

进入 Tomcat webapps 目录创建文件夹 vant-ui(和上面修改的 publicPath 对应),将打包好的 site 中的文件放入新建的 vant-ui 中即可，开启 Tomcat 访问 http://localhost:8080/vant-ui。