vue项目打包部署到tomcat或nginx服务器
2019-07-29 15:57
1011 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jzc12345611/article/details/97645589
vue项目部署到tomcat或nginx服务器url访问不报404
一.vue项目配置
查了不少资料网上关于vue项目打包部署到tomcat服务器的介绍没有详细的说法,特写本篇文章一做总结。以下是详细步骤
1.修改项目中router/index.js
// 找到路由所在路径,具体路径有些项目不相同 export default new Router({ //一定要在路由中添加下面代码 mode: 'history', // 后端支持可开 作用是去掉路由中的#号,默认是hash即是路由中有#号 base: 'admin',//项目名称tomcat webapp 目录下应该建该目录结构 })
2.修改项目中config/index.js
// 修改build下的配置 assetsPublicPath: '/admin/',
二 .部署项目到tomcat服务器
1.tomcat webapp目录下创建文件夹
1.在webApp目录下创建admin文件夹 2.把vue打包的dist目录下的文件copy到admin目录下
2.配置Tomcat 服务器
在tomcat的config目录下的web.xml下添加以下代码 <display-name>webapp</display-name> <description> webapp </description> <error-page> <error-code>404</error-code> <location>/</location> </error-page>
注意:该步骤代码是为了让在用url链接访问时不报404错误
三.部署项目到nginx服务器
1.创建nginx项目目录
1.在nginx服务器中/user/local/nginx/html目录下创建admin文件夹 2.把vue打包的dist目录下的文件copy到admin目录下
2.配置nginx
server { listen 8888; 监听端口号 server_name 10.45.4.218; #项目部署的服务器的ip地址 location /admin { #访问到admin项目的根路径 root /usr/local/nginx/html; index index.html index.htm; try_files $uri $uri/ @router; #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404 } location @router { #指向路由防止刷新报404 rewrite ^.*$ /admin/index.html last; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
注意:该步骤代码是为了让在用url链接访问时不报404错误
admin为项目名称是自己取的,可以改成其他的,但上述三个步骤中的该admin要相同
相关文章推荐
- 如何将打包为WAR的项目部署到Tomcat服务器上
- Vue项目webpack打包部署到Tomcat
- vue项目部署在阿里云服务器上的nginx配置过程 -踩坑记录
- Vue-router+webpack单页项目服务器部署(nginx)
- MyEclipse环境下的JavaWeb项目打包成war包部署到tomcat服务器发生jstl错误解决办法
- CentOS服务器,Nginx+Tomcat 上部署javaEE项目,负载均衡
- Vue项目build打包部署到Tomcat后,刷新报404错误解决方案
- vue-cli打包之后的项目在nginx的部署
- springboot 项目 打包 部署到远程tomcat服务器
- vue项目部署方式:tomcat部署和nginx部署
- Vue项目webpack打包部署到服务器的实例详解
- Idea打包成war包+javaweb项目部署到服务器的tomcat上 史上最详细教程
- Tomcat+Nginx+Linux+Mysql部署豆瓣TOP250的项目到腾讯云服务器
- Maven打包Web 项目并且部署到Linux上的Tomcat服务器下
- Vue项目部署到tomcat服务器
- vue项目打包部署到服务器的方法示例
- 记录一次vue+springboot项目打包部署到服务器上
- Vue项目webpack打包部署到服务器
- 通过eclipse把spring boot项目打包成war包并部署到tomcat服务器上的步骤
- vue项目打包部署到tomcat空白页的解决方式