Tomcat 部署 Vant2-UI 官方文档

Ayou10031

已于 2025-03-23 20:14:00 修改

阅读量3.4k

点赞数 1

分类专栏： Tomcat 文章标签： tomcat git node.js npm

于 2022-11-16 13:08:55 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41091006/article/details/127883220

版权

Tomcat 专栏收录该内容

3 篇文章

订阅专栏

本文档详细介绍了如何在Tomcat服务器上部署Vant2-UI。首先，确保具备Tomcat、VantUI 2.x、NodeJS/NPM和Git等工具。通过Git下载源代码，切换到指定分支，安装依赖并配置package.json和vant.config.js。完成配置后，进行打包，将打包文件放入Tomcat相应目录，并启动Tomcat，通过http://localhost:8080/vant-ui访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提前需要准备的东西

Tomcat
VantUI 2.x
NodeJS/NPM
Git

操作步骤

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

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

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

cd vant
git checkout 2.x

安装依赖

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

配置

package.json

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

  "scripts": {
    "build:site": "vant-cli build-site"
  }

vant.config.js

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

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

打包

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

[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。