DDR爱好者之家

Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
站长资源 2024/11/25 佚名
70 1538
DDR爱好者之家 Design By 杰米

1.准备工作。

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

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

2.其次下载Tomcat

tomcat.apache.org/index.html

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

Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网 "color: #ff0000">3.下载ngrok

ngrok.com/download

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

下载后解压，会得到

Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网 "color: #ff0000">2.创建vue项目

因为我们使用了vue脚手架，因此直接找一个找一个文件夹，打开终端进入这个文件夹，

vue create hello

上面的命令的意思是创建一个初始化的vue项目，hello是名称，后面的过程直接全部回车，暂时不用管。

OK，经过以上步骤，在文件夹下有生成了一个名称为hello的vue项目。

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

在hello项目目录下，终端输入

npm run serve

经过编译打包，本地就开启了以下服务，可以在浏览器中打开地址去访问，正常就显示出了vue的一个介绍页面。

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

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    "text-align: center">Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网 "text-align: center">Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网 "text-align: center">Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网 "color: #ff0000">开启服务


./startup.sh


关闭服务


./shutdown.sh


后面如果看到Tomcat started.这个字样，就代表服务启动成功了。


此时浏览器中通过 http://localhost:8080/ 就可以访问到我们通过tomcat搭建的服务器的网页了。


但是这还只是局域网的，我们希望通过外网也能访问到这个网页，就必须通过工具映射。


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


6.外网映射


在第一步中，我们将ngrok放置在了用户根目录下，则进入用户根目录，终端可以通过输入


cd ~


快捷进入用户根目录，终端输入：


./ngrok http localhost:8080


看到如下状态就代表我们已经映射外网成功，并且已经可以通过下图展示的那两个临时地址，在外网访问我们的网页了。


Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网 "color: #ff0000">7.总结


至此，整个流程就结束了。通过以上步骤，我们就可以将一个网页做好发布给朋友们看啦，自己也可以对vue项目做相应的修改，展示更精美的网站。


以上所述是小编给大家介绍的Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米