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

当前日期2019.5.15

1.准备工做。

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

$ npm install vue
$ npm install -g @vue/cli复制代码

2.其次下载Tomcat

tomcat.apache.org/index.html

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

​

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

/Users/{电脑名称}/Library

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

3.下载ngrok

ngrok.com/download

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

下载后解压，会获得

​

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

2.建立vue项目

由于咱们使用了vue脚手架，所以直接找一个找一个文件夹，打开终端进入这个文件夹，

vue create hello
复制代码

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

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

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

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

npm run serve
复制代码

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

​

3.编译打包Vue项目

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

module.exports = {
    baseUrl: process.env.NODE_ENV === 'production'
        ? '/'
        : '/'
}复制代码

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

如今咱们须要编译打包hello项目，在hello项目目录下，终端输入

npm run build
复制代码

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

​

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

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

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

终端输入：

npm install -g serve
复制代码

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

serve -s dist
复制代码

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

​

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

上一步中，咱们开启的只是本地服务，外网是访问不了。所以咱们须要加注Tomcat。

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

/Users/{电脑名称}/Library

这里面的。

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

此时咱们只须要将dist目录中的文件，所有拷贝的ROOT文件夹下，以下：

​

此时咱们只须要开启tomcat服务便可，

终端进入ApacheTomcat目录下的bin文件夹中，里面有不少指令，咱们输入：
开启服务

./startup.sh复制代码

关闭服务

./shutdown.sh
复制代码

后面若是看到Tomcat started.这个字样，就表明服务启动成功了。

此时浏览器中经过 http://localhost:8080/ 就能够访问到咱们经过tomcat搭建的服务器的网页了。

可是这还只是局域网的，咱们但愿经过外网也能访问到这个网页，就必须经过工具映射。

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

6.外网映射

在第一步中，咱们将ngrok放置在了用户根目录下，则进入用户根目录，终端能够经过输入

cd ~复制代码

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

./ngrok http localhost:8080

看到以下状态就表明咱们已经映射外网成功，而且已经能够经过下图展现的那两个临时地址，在外网访问咱们的网页了。

​

7.总结

至此，整个流程就结束了。经过以上步骤，咱们就能够将一个网页作好发布给朋友们看啦，本身也能够对vue项目作相应的修改，展现更精美的网站。