Vue CLI3创建项目部署到Tomcat使用ngrok映射到外网 - 行业资讯

<强>

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

　　　　　　美元npm安装vue 　　美元npm安装- g @vue/cli 　　　　

tomcat.apache.org/index.html

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

Vue CLI3创建项目部署到Tomcat使用ngrok映射到外网”> & # 8203;
　　下载到本地后,解压缩,并且将解压缩后的文件夹复制到以下路径下,其中电脑名称就是你的用户名称。
　　 <代码>/用户/{电脑名称}/图书馆/<代码> 
　　,并且重命名为ApacheTomcat,这里要提一下,在这个文件夹下有个webapps,双击进去,会有很多文件,不用关心。其中有一个根文件夹,这个就是我们放置编译打包后的网页。后面再提。
　　 
　　 <代码>ngrok.com/download </代码> 
　　上面是下载地址,这个工具需要注册一个账号,登录之后就可以查看到一个令牌,是用来认证的,这里跟着官方介绍的步骤下来就可以了。
　　下载后解压,会得到
　　 <img src= 　　模块。出口={ 　　baseUrl: process.env。NODE_ENV===吧? 　　& # 63;'/' 　　:“/? 　　}

上面的配置信息表示,如果当前打包的环境是生产,那么路径就是‘/靖肪断?这里我为了方便,就两个都设置成根路径了。保存。

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

<代码> npm运行构建

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

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