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

1.准备工作。

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

$ npminstall vue $ npminstall-g @ vue/cli2。其次，下载Tomcat

tomcat.apache.org/index.html

选择任何版本，我用macOS测试过，所以我下载了第二个压缩包

在本地下载后，解压缩它并将解压缩的文件夹复制到以下路径，其中计算机名是您的用户名。

/用户/{计算机名}/库

，并将其重命名为ApacheTomcat。这里需要提到的是，这个文件夹下有一个webapps。双击它，会有很多文件，所以不要在意。有一个ROOT文件夹，这是我们放置编译和打包的网页的地方。我以后再谈。

3.下载ngrok

ngrok.com/download

以上是下载地址。这个工具需要注册一个账户。登录后，您可以查看令牌进行身份验证。只需遵循这里的官方步骤。

下载并解压缩后，您将获得

这个文件放在用户的根目录下，方便终端键入指令

2.创建vue项目

因为用的是vue脚手架，直接找到一个文件夹，打开终端，进入这个文件夹。

vue创建你好

上面的命令是指创建一个初始化的vue项目，hello是名字，后续所有的流程直接进入回车，暂时不需要。

好的，经过以上步骤，在文件夹下创建了一个名为hello的vue项目。

打开终端，cd进入hello文件夹。

在你好项目目录下，终端输入

npm运行服务

编译打包后，本地启动以下服务，在浏览器中打开地址即可访问，正常显示vue的介绍页面。

3.编译并打包Vue项目

在hello项目中，添加一个文件vue.config.js，内容如下

module . exports={ base URL : process . ENV . NODE _ ENV===' production '？“/”:“/”的上述配置信息表明，如果当前打包环境是生产环境，那么路径在“/”网站的根路径下。在这里，为了方便起见，我将两者都设置为根路径。保存。

现在我们需要编译并打包hello项目。在hello项目目录下，终端输入

npm运行构建

之后，它开始自动编译和打包。此时，您会发现hello项目下有一个额外的dist文件夹，内容如下：

上述文件夹中的内容是打包的网站项目。

4.启动本地服务，验证打包的网页是否正常工作

需要通过启动HTTP服务器来访问dist目录。在本地预览生产环境最简单的方法是使用Node.js静态文件服务器，例如serve

终端输入：

npm安装-g服务

安装成功后，进入hello项目，终端输入：

发球区

也就是说，我们为上一步编译和打包的文件启动了一个本地服务器。信息如下。这时，我们可以打开浏览器，访问我们的网页。如果显示正常，说明我们可以进行下一步了。

5.打开Tomcat服务并显示网页

在上一步中，我们只启动了本地服务，但无法访问外部网络。因此，我们需要养雄猫。

第一步，我们已经下载了tomcat服务器。首先进入ApacheTomcat文件夹。第一步，我们把它放进去

/用户/{计算机名}/库

在这里。

前面，我们介绍了有一个webapps文件夹，在这个文件夹中有一个ROOT文件夹，我们将打包的网页放在这个文件夹中。在上一步中，我们通过npm run build打包网页，并在dist目录中生成它们。

此时，我们只需要将dist目录中的所有文件复制到ROOT文件夹，如下所示：

此时，我们只需要打开tomcat服务。

终端进入ApacheTomcat目录下的bin文件夹，里面有很多指令。我们输入：

开放服务。/startup.sh

关闭服务。/shutdown.sh

如果您看到“Tomcat稍后启动”这个词，这意味着服务启动成功。

此时可以通过浏览器中的http://localhost 33608080/访问tomcat搭建的服务器的网页。

但这只是一个局域网。我们希望这个网页可以通过外部网络访问，所以必须通过工具进行映射。

也就是我们上面下载的ngrok。

6.外部网络映射

在第一步中，我们将ngrok放在用户根目录中，然后输入用户根目录，终端可以通过输入

cd ~

快速访问用户根目录，终端输入：/ngrok http localhost:8080

看到下面的状态意味着我们已经成功映射了外部网络，我们可以通过下图所示的两个临时地址访问我们在外部网络上的网页。

7.摘要

至此，整个过程结束。通过以上步骤，我们可以向朋友发布一个网页，也可以修改vue项目，展示一个更漂亮的网站。

上面提到的是边肖介绍的Vue CLI3创建项目，部署到Tomcat，使用ngrok映射到外部网络。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！