网硕互联帮助中心文章目录
-
- 一、Vue项目部署步骤
- 二、404错误原因及解决方案
-
- 错误场景
- 原因分析
- 解决方案
一、Vue项目部署步骤
在前后端分离的开发模式下，前端项目独立部署通常涉及以下步骤：
listen 80;
server_name www.xxx.com;
location / {
index /data/dist/index.html;
}
}
nginx -s reload
二、404错误原因及解决方案
错误场景
- 问题描述：Vue项目在本地运行正常，但部署到服务器后刷新页面出现404错误。
- 错误定位：HTTP 404错误表示请求的资源不存在。
原因分析
- History模式问题：在Vue单页应用（SPA）中，所有用户交互通过动态重写当前页面实现。构建物只产出index.html，而nginx配置可能未涵盖所有路由。
- Hash模式无问题：Hash模式不会将hash值包含在HTTP请求中，因此不会因hash变化重新加载页面，避免了404错误。
解决方案
listen 80;
server_name www.xxx.com;
location / {
index /data/dist/index.html;
try_files $uri $uri/ /index.html;
}
}
修改后重启Nginx。nginx -s reload
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})
其他后端配置方案（如Apache、Node.js）的核心思想类似，本文不再详述。
评论前必须登录！
注册