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 相关文章推荐
JavaScript中的Math 使用介绍
Apr 21 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
微信小程序单选框自定义赋值
May 26 Javascript
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
基于mysql的论坛(1)
2006/10/09 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
Python fileinput模块使用介绍
2014/11/30 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
产假请假条
2014/04/10 职场文书
产品委托授权书范本
2014/09/16 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
开学第一周总结
2015/07/16 职场文书
改造DE1103三步曲
2022/04/07 无线电