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

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项目做相应的修改，展示更精美的网站。

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

赞 (0)

相关推荐

  • Vue CLI3搭建的项目中路径相关问题的解决

    这是开头 最近在试水 Vue CLI 3,并且尝试配置一个多页面(多应用)项目出来,期间又遇到各种路径问题,于是...于是有了下面的唠叨. 以下都是基于 Vue CLI 3 来举例说明的,使用 2.x 版本的其实也类似 首先,参考 官方文档对静态资源处理的说明,并通过自己的实践,可以总结出以下内容 静态资源可以通过两种方式进行处理: 1.以下情况下,资源不会被 webpack 处理,而是被直接拷贝: 放置在 public 目录下,即使未被使用. 通过绝对路径被引用,即以 / 开头的路径. 2.以

  • VueCli3构建TS项目的方法步骤

    使用vue-cli3构建Typescript项目 import 和 require require: 以同步的方式检索其他模块的导出 (开发) import: 动态地加载模块 (生产) 相关文档:module methods vue-cli3 vue create project-name vue-cli3配置, 生成目录结构: │ .browserslistrc │ .gitignore │ .postcssrc.js // postcss 配置 │ babel.config.js │ cyp

  • Vue-cli3项目配置Vue.config.js实战记录

    Vue-cli3项目配置Vue.config.js实战记录

    Vue-cli3 搭建的项目 界面想对之前较为简洁 之前的build和config文件夹不见了,那么应该如何配置 如webpack等的配那只需要在项目的根目录下vue.config.js 文件(是根目录,不是src目录 语法 module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build

  • Vue Cli3 创建项目的方法步骤

    Vue Cli3 创建项目的方法步骤

    最近的开发项目中使用了vue-cli 3.0,使用体验可以说非常棒了,模板更加制定化,配置更加简洁.以下总结下应用过程中的一些经验. 1. 安装 npm install -g @vue/cli 2. 创建一个项目 vue create iview-admin # OR vue ui default (babel, eslint) 默认套餐,提供 babel 和 eslint 支持. Manually select features 自己去选择需要的功能,提供更多的特性选择.比如如果想要支持 Ty

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

    1.准备工作. 1.首先准备安装Vue及Vue-CLI $ npm install vue $ npm install -g @vue/cli 2.其次下载Tomcat tomcat.apache.org/index.html 任选一个版本,我测试用的是macOS,所以下载了第二个压缩包 ​ 下载到本地后,解压缩,并且将解压缩后的文件夹复制到以下路径下,其中电脑名称就是你的用户名称. /Users/{电脑名称}/Library ,并且重命名为ApacheTomcat,这里要提一下,在这个文件夹下

  • 在idea中将创建的java web项目部署到Tomcat中的过程图文详解

    在idea中将创建的java web项目部署到Tomcat中 采用的工具idea 2018.3.6 Tomcat7 1.先创建第一个新项目secondweb(注意勾选JavaEE下的web Application(4.0),窗口下的version对应为4.0,并且保证create web.xml已经被勾选) 2.在创建好的web项目的web/WEB-INF目录下创建两个文件夹:classes和lib.classes用来存放编译后输出的class文件,lib用来存放第三方jar包(下图显示的是创建

  • 如何把spring boot项目部署到tomcat容器中

    把spring-boot项目按照平常的web项目一样发布到tomcat容器下 一.修改打包形式 在pom.xml里设置 <packaging>war</packaging> 二.移除嵌入式tomcat插件 在pom.xml里找到spring-boot-starter-web依赖节点,在其中添加如下代码, <dependency> <groupId>org.springframework.boot</groupId> <artifactId&

  • Java Web项目部署在Tomcat运行出错与解决方法示例

    Java Web项目部署在Tomcat运行出错与解决方法示例

    本文实例讲述了Java Web项目部署在Tomcat运行出错与解决方法.分享给大家供大家参考,具体如下: 1.在部署Java Web项目的过程中,启动Tomcat出现报错提示 具体报错如下: Could not load the Tomcat server configuration at \Servers\Tomcat v7.0 Server at localhost-config. The configuration may be corrupt or incomplete. 元素类型 "H

  • Vue UI创建项目详细步骤

    Vue UI创建项目详细步骤

    1.首先要安装最新的Vue CLI 在命令行工具里输入一下命令 npm install -g @vue/cli 或者 yarn global add @vue/cli 安装成功后,可用vue -V命令查看已安装的Vue CLI版本 2.在命令行运行 vue ui,就会出现图形化管理 在界面上可以看到第一个tab项目,点击创建这个tab ,可以来创建一个新的vue项目 3.点击了创建之后可以看到一下内容,可以项目创建一个目录或者选择一个目录,然后选择一种包管理工具:可以使npm,也可以是yarn等

  • vue项目部署到nginx/tomcat服务器的实现

    开发完的vue项目,需要部署到Nginx/Tomcat服务器上运行,作为一个前端小白,刚接触vue不久,研究了一番,于是写下这篇文章,记录下来便于今后部署. 1.router(history)模式vue项目部署到nginx 1)修改router模式为history(默认为hash) const router = new VueRouter({ routes, mode: 'history' }); 对路由模式不清楚的小伙伴,可以看这篇vue-router路由模式详解 2)修改config/ind

  • Spring Boot部署到Tomcat过程中遇到的问题汇总

    前言 Spring Boot项目一般都是内嵌tomcat或者jetty服务器运行,很少用war包部署到外部的服务容器,即使放到linux中,一般也是直接启动Application类,但是有些时候我们需要部署到外部的服务器,这对于Spring Boot来说却有点麻烦 下面就记录下自己部署的第一个SpringBoot项目到Tomcat中遇到的问题,三个地方需要注意:头疼-- 详细如下: 1.SpringBoot有自己内置Tomcat容器,所以要告诉它不使用内置容器,不指定Tomcat版本配置如下:

  • vue cli3 配置proxy代理无效的解决

    vue cli3 创建的vue项目配置开发环境代理无效,网上的各种配置都试了,还是不行,最后终于试出来一种配置方法 vue.config.js配置如下内容(不要配置任何多余的选项,什么changOrigin pathRewrite 之类的东西都不要配): module.exports = { devServer: { proxy:"http://127.0.0.1:8081", port: 8085 } } axios访问的时候不要配置任何东西,axios里访问的url不需要加任何前缀

  • idea打包成war包部署到tomcat及访问路径问题(图文详解)

    idea将web项目打包成war最重要的是配置atrificats. 首先打开file -> project structure 创建之后,output directory即为输出war包的路径.Name可以随意,之后点击绿色+,打开directory content 选择webapp目录,记得勾选include in project build 点击ok后,新建一个配置 选择artificats 这样就算配置完成,点击run执行之后,就到前面的output directory设置的文件夹里找到

随机推荐