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


Posted in Javascript onAugust 26, 2019

开发完的vue项目,需要部署到Nginx/Tomcat服务器上运行,作为一个前端小白,刚接触vue不久,研究了一番,于是写下这篇文章,记录下来便于今后部署。

1.router(history)模式vue项目部署到nginx

1)修改router模式为history(默认为hash)

const router = new VueRouter({
 routes,
 mode: 'history'
});

对路由模式不清楚的小伙伴,可以看这篇vue-router路由模式详解

2)修改config/index.js,build下静态资源路径,完成后执行npm run build打包

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

3)修改nginx配置

server {
  listen    80;//代理端口
  server_name 192.168.0.152;//代理名称(域名、ip)
  #charset koi8-r;

  #access_log logs/host.access.log main;

  location / {
    root test; //项目存放的地址(当前服务器位置)
    index /index.html;            
    try_files $uri $uri/ @router; //一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,返回同一个 index.html 页面
  }
  location @router {
    rewrite ^.*$ /index.html last;
  }
}

运行结果:

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

2.vue项目部署到tomcat

1)项目上线,一般需要添加项目名,并且消去vue-router产生的#号,需要在router配置

const router = new VueRouter({
 routes,
 mode: 'history',
 base: '/test/'//项目名称 访问路由页面都需要加上这个,访问的根路径为http://ip:port/test
});

2)修改config/index.js,build下静态资源路径与base的取值一致

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

3)tomcat的配置

在tomcat的webapps新建文件夹,文件夹名称和上面配置的根路径一致,即为test,然后将打包生成的dist文件夹里面的文件复制到test下,并且新建文件WEB-INF/web.xml。

项目结构为:

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

WEB-INF目录下新增web.xml内容为:

//覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,返回同一个 index.html页面
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
           http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  version="3.1" metadata-complete="true">
  <display-name>Router for Tomcat</display-name>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>

详细了解可看vue官方文档后端配置HTML5 History 模式

4)重新启动tomcat

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
vue-router路由模式详解(小结)
Aug 26 #Javascript
vue+moment实现倒计时效果
Aug 26 #Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 #Javascript
Moment.js实现多个同时倒计时
Aug 26 #Javascript
vue获取验证码倒计时组件
Aug 26 #Javascript
seajs和requirejs模块化简单案例分析
Aug 26 #Javascript
JavaScript实现身份证验证代码实例
Aug 26 #Javascript
You might like
操作Oracle的php类
2006/10/09 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
python pygame实现2048游戏
2018/11/20 Python
numpy数组广播的机制
2019/07/12 Python
python生成器用法实例详解
2019/11/22 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
Python callable内置函数原理解析
2020/03/05 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
EJB的几种类型
2012/08/15 面试题
公司庆典欢迎词
2015/01/26 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
员工辞职信范文大全
2015/05/12 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
Python面向对象之内置函数相关知识总结
2021/06/24 Python
html中两种获取标签内的值的方法
2022/06/16 jQuery