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


Posted in Javascript onMay 16, 2019

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映射到外网

下载到本地后,解压缩,并且将解压缩后的文件夹复制到以下路径下,其中电脑名称就是你的用户名称。

/Users/{电脑名称}/Library

,并且重命名为ApacheTomcat,这里要提一下,在这个文件夹下有个webapps,双击进去,会有很多文件,不用关心。其中有一个ROOT文件夹,这个就是我们放置编译打包后的网页。后面再提。

3.下载ngrok

ngrok.com/download

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

下载后解压,会得到

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

将这个文件放置在用户根目录下,方便终端敲指令

2.创建vue项目

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

vue create hello

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

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

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

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

npm run serve

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

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

3.编译打包Vue项目

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

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/'
    : '/'
}

上面的配置信息表示,如果当前打包的环境是production,那么路径就是'/'网站根路径下,这里我为了方便,就2个都设置成根路径了。保存。

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

npm run build

之后开始自动编译打包。此时,会发现,hello项目下多了一个dist文件夹,内容如下:

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

以上文件夹中的内容就是我们打包后的网站项目了。

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

dist 目录需要启动一个 HTTP 服务器来访问 ,在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器,例如使用 serve

终端输入:

npm install -g serve

安装成功后,进入hello项目,终端输入:

serve -s dist

也就是对我们上一步中编译打包好的文件启动了一个本地服务器,信息如下,此时就可以打开浏览器,访问我们的网页了。若显示正常则表示我们可以进入下一步。

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

5.开启Tomcat服务,显示网页

上一步中,我们开启的只是本地服务,外网是访问不了。因此我们需要加注Tomcat。

在第一步中,我们已经下载了tomcat服务器。首先进入那个ApacheTomcat文件夹中,在第一步中我们是放在

/Users/{电脑名称}/Library

这里面的。

之前我们介绍过有一个webapps文件夹,在这个文件夹中有一个ROOT文件夹,这里面就是放我们打包好的网页的,在上一步中我们已经通过npm run build打包好网页,并且生成在了dist目录中。

此时我们只需要将dist目录中的文件,全部拷贝的ROOT文件夹下,如下:

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

此时我们只需要开启tomcat服务即可,

终端进入ApacheTomcat目录下的bin文件夹中,里面有很多指令,我们输入:

开启服务

./startup.sh

关闭服务

./shutdown.sh

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

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

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

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

6.外网映射

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

cd ~

快捷进入用户根目录,终端输入:

./ngrok http localhost:8080

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

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

7.总结

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

以上所述是小编给大家介绍的Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript类和继承 prototype属性
Sep 03 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
js实现带搜索功能的下拉框
Jan 11 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 Javascript
详解vue2.0模拟后台json数据
May 16 #Javascript
详解Vue-Router源码分析路由实现原理
May 15 #Javascript
微信小程序select下拉框实现效果
May 15 #Javascript
详解js常用分割取字符串的方法
May 15 #Javascript
elementUI table表格动态合并的示例代码
May 15 #Javascript
详解VUE调用本地json的使用方法
May 15 #Javascript
微信小程序的mpvue框架快速上手指南
May 15 #Javascript
You might like
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
Python连接数据库学习之DB-API详解
2017/02/07 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
Python函数装饰器实现方法详解
2018/12/22 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
Django 静态文件配置过程详解
2019/07/23 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
使用Python函数进行模块化的实现
2019/11/15 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
蔻驰美国官网:COACH美国
2016/08/18 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
写好自荐信需做到的5要点
2014/03/07 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
淘宝活动总结范文
2014/06/26 职场文书
春风化雨观后感
2015/06/11 职场文书
九不准学习心得体会
2016/01/23 职场文书
倡议书怎么写?
2019/04/11 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python