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

开发的vue项目需要部署到Nginx/Tomcat服务器上运行。作为一个前端小白，刚接触vue，研究了一下，所以写了这篇文章，记录下来供以后部署。

1.1 .路由器(历史)模式下的vue项目部署到nginx

1)将路由器模式更改为历史(默认为哈希)

const router=new VueRouter({ routes，mode : ' history ' })；对于不清楚路由模式的小伙伴，可以阅读这份vue-router路由模式的详细说明

2)修改config/index.js和build下的静态资源路径，然后执行npm运行构建打包

3)修改nginx配置

服务器{ listen 80//代理端口server _ name 192 . 168 . 0 . 152；//代理名称(域名、IP)# charset koi 8-r；# access _ log logs/host . access . log main；location/{ root test；//存储项目的地址(当前服务器位置)index/index . html；try _ files $ uri $ uri/@路由器；//涵盖所有情况的候选资源：如果URL与任何静态资源都不匹配，则返回到相同的index.html页面}位置@ router {重写。* $/index . html last；}}运行结果：

2.2.vue项目被部署到tomcat

1)项目上线时，一般需要添加项目名称，去掉vue-router生成的#号，需要在router中配置

constraint out=new vue router({ routes，mode:' history '，base : '/test/'//都需要添加到项目名称的访问路由页面，访问根路径为http://IP 3360 port/test })；2)修改config/index.js，构建下的静态资源路径与base的值一致

3)tomcat配置

在tomcat的webapps中新建一个文件夹，文件夹名称与上面配置的根路径相同，即test，然后将打包的dist文件夹中的文件复制到test，新建一个文件web-INF/web.xml。

项目结构为：

WEB-INF目录中新的web.xml内容是：

//覆盖所有候选资源：如果URL不匹配任何静态资源，返回同一个index.html页面？xml版本='1.0 '编码='UTF-8 '？web-app xmlns=' http://xmlns . JCP . org/XML/ns/javaee ' xmlns : xsi=' http://www . w3 . org/2001/XMLSchema-instance ' xsi 3360 schema location=' http://xmlns . JCP . org/XML/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd'版本='3.1 '元数据-完整=' true ' Display-name router for Tomcat/Display-name-error-page-error-error-page

4)重启tomcat

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。