办理vue项目本地开发完成后部署到服务器后报404的问题 ...

一、怎样部署

前后端分离开发模式下，前后端是独立布署的，前端只需要将末了的构建物上传至目标服务器的web容器指定的静态目次下即可
我们知道vue项目在构建后，是天生一系列的静态文件
通例布署我们只需要将这个目次上传至目标服务器即可

1. // scp 上传 user为主机登录用户，host为主机外网ip, xx为web容器静态资源路径
2. scp dist.zip user@host:/xx/xx/xx

复制代码

让web容器跑起来，以nginx为例

1. server {
2.   listen  80;
3.   server_name  www.xxx.com;
5.   location / {
6.     index  /data/dist/index.html;
7.   }
8. }

复制代码

配置完成记得重启nginx

1. // 检查配置是否正确
2. nginx -t
4. // 平滑重启
5. nginx -s reload

复制代码

操作完后就可以在欣赏器输入域名进行访问了
当然上面只是提到最简单也是最直接的一种布署方式
什么主动化，镜像，容器，流水线布署，本质也是将这套逻辑抽象，隔离，用程序来代替重复性的劳动，本文不睁开
二、404问题

这是一个经典的问题，相信很多同砚都有遇到过，那么你知道其真正的原因吗？
我们先还原一了局景：
vue项目在本地时运行正常，但部署到服务器中，革新页面，出现了404错误
先定位一下，HTTP 404 错误意味着链接指向的资源不存在
问题在于为什么不存在？且为什么只有history模式下会出现这个问题？
#为什么history模式下有问题
Vue是属于单页应用（single-page application）
而SPA是一种网络应用程序或网站的模子，全部用户交互是通过动态重写当前页面，前面我们也看到了，不管我们应用有多少页面，构建物都只会产出一个index.html
现在，我们回头来看一下我们的nginx配置

1. server {
2.   listen  80;
3.   server_name  www.xxx.com;
5.   location / {
6.     index  /data/dist/index.html;
7.   }
8. }

复制代码

可以根据 nginx 配置得出，当我们在所在栏输入 www.xxx.com 时，这时会打开我们 dist 目次下的 index.html 文件，然后我们在跳转路由进入到 www.xxx.com/login
关键在这里，当我们在 website.com/login 页实行革新操作，nginx location 是没有相关配置的，所以就会出现 404 的情况
为什么hash模式下没有问题
router hash 模式我们都知道是用符号#表现的，如 website.com/#/login, hash 的值为 #/login
它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新加载页面
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 website.com/#/login 只有 website.com 会被包含在请求中 ，因此对于服务端来说，即使没有配置location，也不会返回404错误
办理方案

看到这里我相信大部分同砚都能想到怎么办理问题了，
产生问题的本质是由于我们的路由是通过JS来实行视图切换的，
当我们进入到子路由时革新页面，web容器没有相对应的页面此时会出现404
所以我们只需要配置将恣意页面都重定向到 index.html，把路由交由前端处置惩罚
对nginx配置文件.conf修改，添加try_files $uri $uri/ /index.html;

1. server {
2.   listen  80;
3.   server_name  www.xxx.com;
5.   location / {
6.     index  /data/dist/index.html;
7.     try_files $uri $uri/ /index.html;
8.   }
9. }

复制代码

修改完配置文件后记得配置的更新

1. nginx -s reload

复制代码

这么做以后，你的服务器就不再返回 404 错误页面，由于对于全部路径都会返回 index.html 文件
为了避免这种情况，你应该在 Vue 应用里面覆盖全部的路由情况，然后在给出一个 404 页面

1. const router = new VueRouter({
2.   mode: 'history',
3.   routes: [
4.     { path: '*', component: NotFoundComponent }
5.   ]
6. })

复制代码

关于后端配置方案还有：Apache、nodejs等，思想是一致的，这里就不睁开述说了

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。