返回

技术无疆界：用Vue CLI3、Tomcat和ngrok构建外网可访问项目

前端

准备工作

  1. 安装Node.js 。Vue CLI3需要Node.js才能运行。如果您还没有安装Node.js，请从Node.js官方网站下载并安装它。

  2. 安装Vue CLI3 。要安装Vue CLI3，请运行以下命令：

npm install -g @vue/cli
  1. 创建Vue项目 。要创建一个Vue项目，请运行以下命令：
vue create my-project

  1. 安装Tomcat 。Tomcat可以从Apache Tomcat官方网站下载。下载完成后，请将其解压缩到您喜欢的目录中。

  2. 安装ngrok 。ngrok可以从ngrok官方网站下载。下载完成后，请将其解压缩到您喜欢的目录中。

部署项目

  1. 启动Tomcat 。要启动Tomcat，请打开命令行并导航到Tomcat的bin目录。然后，运行以下命令：
startup.sh
  1. 构建Vue项目 。要构建Vue项目，请导航到项目的目录并运行以下命令：
npm run build
  1. 将构建后的项目复制到Tomcat的webapps目录 。构建完成后，您需要将构建后的项目复制到Tomcat的webapps目录。通常，Tomcat的webapps目录位于以下位置：
/usr/local/tomcat/webapps
  1. 启动ngrok 。要启动ngrok，请打开命令行并导航到ngrok的目录。然后，运行以下命令：
ngrok http 8080

访问项目

现在，您就可以通过访问ngrok为您提供的URL来访问您的项目了。例如，如果ngrok为您提供的URL是https://your-project.ngrok.io，那么您就可以通过在浏览器中输入此URL来访问您的项目。

注意

如果您想将您的项目部署到生产环境，您可能需要进行一些额外的配置。例如，您可能需要设置一个域名并配置SSL证书。您还可能需要考虑使用负载均衡器来提高您的项目的性能和可用性。