vue项目部署到tomcat或nginx服务器url访问不报404
一.vue项目配置
查了不少资料网上关于vue项目打包部署到tomcat或nginx服务器没有详细的介绍,特写本篇文章一做总结。以下是详细步骤
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;
}
}