如何用Vue CLI3构建项目并部署至Tomcat，再通过ngrok实现外网访问？

本文共计1635个文字，预计阅读时间需要7分钟。

1. 准备工作。

1.首先准备安装Vue及Vue CLI。

- 使用npm安装Vue：`npm install vue` - 使用npm全局安装Vue CLI：`npm install -g @vue/cli`

2. 下载Tomcat。 - 访问Tomcat官网：[tomcat.apache.org](http://tomcat.apache.org/index.) - 选择合适版本下载，例如macOS用户可下载第二个压缩包。 - 下载完成后，解压到本地。

1.准备工作。

1.首先准备安装Vue及Vue-CLI

$ npm install vue $ npm install -g @vue/cli

2.其次下载Tomcat

tomcat.apache.org/index.html

任选一个版本，我测试用的是macOS，所以下载了第二个压缩包

​

下载到本地后，解压缩，并且将解压缩后的文件夹复制到以下路径下，其中电脑名称就是你的用户名称。

/Users/{电脑名称}/Library

，并且重命名为ApacheTomcat，这里要提一下，在这个文件夹下有个webapps，双击进去，会有很多文件，不用关心。其中有一个ROOT文件夹，这个就是我们放置编译打包后的网页。后面再提。

3.下载ngrok

ngrok.com/download

上面是下载地址，这个工具需要注册一个账号，登录之后就可以查看到一个token，是用来认证的，这里跟着官方介绍的步骤下来就可以了。