蝙蝠岛资源网 Design By www.hbtsch.com

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映射到外网,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

标签:
vue,CLI3创建项目,vue,cli,tomcat

蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

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

暂无Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。