面试官：vue项目如何部署？有遇到布署服务器后刷新404问题吗？

左手的ㄟ右手 2023-01-03 04:06 87阅读 0赞

![format_png][]

## 一、如何部署    ##

前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的`web`容器指定的静态目录下即可

我们知道`vue`项目在构建后，是生成一系列的静态文件![format_png 1][]常规布署我们只需要将这个目录上传至目标服务器即可

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

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

server {
      listen  80;
      server_name  www.xxx.com;
    
      location / {
        index  /data/dist/index.html;
      }
    }

配置完成记得重启`nginx`

// 检查配置是否正确
    nginx -t 
    
    // 平滑重启
    nginx -s reload

操作完后就可以在浏览器输入域名进行访问了

当然上面只是提到最简单也是最直接的一种布署方式

什么自动化，镜像，容器，流水线布署，本质也是将这套逻辑抽象，隔离，用程序来代替重复性的劳动，本文不展开

## 二、404问题 ##

这是一个经典的问题，相信很多同学都有遇到过，那么你知道其真正的原因吗？

我们先还原一下场景：

*  `vue`项目在本地时运行正常，但部署到服务器中，刷新页面，出现了404错误

先定位一下，HTTP 404 错误意味着链接指向的资源不存在

问题在于为什么不存在？且为什么只有`history`模式下会出现这个问题？

### 为什么history模式下有问题 ###

`Vue`是属于单页应用（single-page application）

而`SPA`是一种网络应用程序或网站的模型，所有用户交互是通过动态重写当前页面，前面我们也看到了，不管我们应用有多少页面，构建物都只会产出一个`index.html`

现在，我们回头来看一下我们的`nginx`配置

server {
      listen  80;
      server_name  www.xxx.com;
    
      location / {
        index  /data/dist/index.html;
      }
    }

可以根据 `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;`

server {
      listen  80;
      server_name  www.xxx.com;
    
      location / {
        index  /data/dist/index.html;
        try_files $uri $uri/ /index.html;
      }
    }

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

nginx -s reload

这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 `index.html` 文件

为了避免这种情况，你应该在 `Vue` 应用里面覆盖所有的路由情况，然后在给出一个 404 页面

const router = new VueRouter({
      mode: 'history',
      routes: [
        { path: '*', component: NotFoundComponent }
      ]
    })

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

## 参考文献 ##

*  https://juejin.cn/post/6844903872637632525
 *  https://vue-js.com/topic/5f8cf91d96b2cb0032c385c0

面试官VUE系列总进度：30／33

[面试官：了解过vue中的diff算法吗？说说看][vue_diff]

[面试官：Vue项目中有封装过axios吗？怎么封装的？][Vue_axios]

[面试官：你了解Axios的原理吗？有看过它的源码吗？][Axios]

[面试官：SSR解决了什么问题？有做过SSR吗？你是怎么做的？][SSR_SSR]

[面试官：说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？][vue]

[面试官：Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？][Vue]

[面试官：跨域是什么？Vue项目中你是如何解决跨域的呢？][Vue 1]

篇副有限，扫下方二维码查看往期

![format_png 2][]

[format_png]: /images/20221119/a867b0f5d6844d38932ea20d562ed706.png
[format_png 1]: /images/20221119/980d2e0f4a004dfaaa649e6325180588.png
[vue_diff]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c623cb674f35ef6e46d8a2aa70d524ee3a4ae005bf6e77008c3ce2510dcdb4d7bbde2667&idx=1&mid=2247484533&scene=21&sn=0b21d608fa46145c5118e22fc33a5bcf#wechat_redirect
[Vue_axios]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c6decb674fc8aed35ee8254fe7f8cfc398648fa643039b29e3f6dda7caf17ff83df2f28a&idx=1&mid=2247484552&scene=21&sn=e847305e8330a6817e8800820774e78b#wechat_redirect
[Axios]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c6f4cb674fe2c90b960392c402fa2452e62bcdf0a703a9ad56d454e7643dfd2b44e38391&idx=1&mid=2247484578&scene=21&sn=52ea1909abe13d6d7764384455b2e925#wechat_redirect
[SSR_SSR]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c6ebcb674ffd46b20d29b32f156e7cb8acb2c54ade0ed206b7ed887f6474a55849858ad4&idx=1&mid=2247484605&scene=21&sn=92e2e45cbba021fe685f0f8252ffe8b4#wechat_redirect
[vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c682cb674f94dff89689298aa5390e6484c45bc765288189528cf148606e2feb17c467f4&idx=1&mid=2247484628&scene=21&sn=43953745061afc65ed51f074b28679c5#wechat_redirect
[Vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c6b4cb674fa2c30d5640b0328d6a9fc5392d8246683508fab849ab2802e22998d6de0db5&idx=1&mid=2247484642&scene=21&sn=f38d2fdd9c89526dd415f15fa3289380#wechat_redirect
[Vue 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c6b8cb674faed209c152d1934b0ac9c6ec653ae4ae78ec4bd6ac254644a4c54d3bf9cabd&idx=1&mid=2247484654&scene=21&sn=2305434f7e8d165a33e9f0d0e4ac0cb1#wechat_redirect
[format_png 2]: /images/20221119/fb6674ffa3174663acebb7179ea9dfe8.png