vue项⽬部署到nginxtomcat服务器的实现
开发完的vue项⽬，需要部署到Nginx/Tomcat服务器上运⾏，作为⼀个前端⼩⽩，刚接触vue不久，研究了⼀番，于是写下这篇⽂章，记录下来便于今后部署。
1）修改router模式为history（默认为hash）
const router = new VueRouter({
routes,
mode: 'history'
});
对路由模式不清楚的⼩伙伴，可以看这篇
2）修改config/index.js，build下静态资源路径，完成后执⾏npm run build打包
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;
}
}
运⾏结果：
2.vue项⽬部署到tomcat
1）项⽬上线，⼀般需要添加项⽬名，并且消去vue-router产⽣的#号，需要在router配置
const router = new VueRouter({
routes,
mode: 'history',
base: '/test/'//项⽬名称访问路由页⾯都需要加上这个，访问的根路径为ip:port/test
});
2）修改config/index.js，build下静态资源路径与base的取值⼀致
3）tomcat的配置
在tomcat的webapps新建⽂件夹，⽂件夹名称和上⾯配置的根路径⼀致，即为test，然后将打包⽣成的dist⽂件夹⾥⾯的⽂件复制到test下，并且新建⽂件l。
项⽬结构为：
WEB-INF⽬录下新增l内容为：
//覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，返回同⼀个 index.html页⾯
nginx部署前端项目<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="/xml/ns/javaee" xmlns:xsi="/2001/XMLSchema-instance"
xsi:schemaLocation="/xml/ns/javaee
/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
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。