Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网

下面是Vue CLI 3创建项目部署到Tomcat并使用ngrok映射到外网的完整攻略。

准备工作

首先，需要确保安装了以下软件：Node.js、Vue CLI 3、Tomcat和ngrok。如果没有安装，可以按照以下步骤安装：

1. 安装Node.js：在官网下载对应系统的安装包，进行安装；
2. 安装Vue CLI 3：在命令行中输入 npm install -g @vue/cli 进行安装；
3. 安装Tomcat：在官网下载对应系统的安装包，进行安装；
4. 安装ngrok：在官网下载对应系统的安装包，进行安装。

创建Vue项目

在命令行中输入以下命令创建Vue项目：

vue create my-project

其中，my-project是自己定义的项目名。

配置Vue项目

配置Vue项目，将打包后的文件放到Tomcat的webapps目录下，可以使用以下命令进行配置：

1. 进入项目根目录下执行以下命令：

npm run build

1. 将 dist 目录下的文件复制到Tomcat的webapps目录下：

cp -r dist/* $TOMCAT_HOME/webapps/my-project/

其中，$TOMCAT_HOME表示Tomcat的安装目录。

启动Tomcat

在命令行中输入以下命令启动Tomcat：

$TOMCAT_HOME/bin/startup.sh

其中，$TOMCAT_HOME表示Tomcat的安装目录。

配置ngrok

打开命令行，输入以下命令启动ngrok：

ngrok http 8080

其中，8080表示Tomcat的启动端口号。

接下来，ngrok会生成一个随机生成的域名，例如 http://a5ebxxxx.ngrok.io，可以通过该地址进行访问。

测试访问

在浏览器中输入上述生成的域名地址进行访问，如果可以正常访问 Vue 项目，则表示配置成功。

示例说明

示例1

以Vue CLI 3默认配置创建Vue项目为例。

1. 在命令行中输入以下命令创建Vue项目：

vue create my-project

其中，my-project是自己定义的项目名。

1. 执行以下命令打包项目：

npm run build

1. 将 dist 目录下的文件复制到Tomcat的webapps目录下：

cp -r dist/* $TOMCAT_HOME/webapps/my-project/

1. 启动Tomcat：

$TOMCAT_HOME/bin/startup.sh

1. 启动ngrok：

ngrok http 8080

1. 在浏览器中输入生成的随机域名地址进行访问。

示例2

以Vue CLI 3支持TypeScript配置创建Vue项目为例。

1. 在命令行中输入以下命令创建Vue项目：

vue create --default --typescript my-project

其中，my-project是自己定义的项目名。

1. 执行以下命令打包项目：

npm run build

1. 将 dist 目录下的文件复制到Tomcat的webapps目录下：

cp -r dist/* $TOMCAT_HOME/webapps/my-project/

1. 启动Tomcat：

$TOMCAT_HOME/bin/startup.sh

1. 启动ngrok：

ngrok http 8080

1. 在浏览器中输入生成的随机域名地址进行访问。