如何部署？
-
前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的打包文件上传到服务器的web容器指定的静态目录下
vue项目在构建后，是生成一系列的静态文件简单的部署我们只需要把这个构建的dist目录上传到服务器指定的目录即可
- 然后就是反向代理配置，这里我们用nginx来做反向代理（怎么安装启动nginx自行去百度）
进入nginx的配置文件编写刚刚我们上传的静态文件路径，添加好了保存，然后重载nginx配置文件nginx -s reload
server {
listen 80; # 监听80端口
server_name www.xxx.com; # 访问的域名
location / {
root /www/wwwroot/mie-app; # 存放静态文件的路径
index index index.php index.html index.htm default.php default.htm default.html; # 默认访问的文件
}
}
- 操作完毕就能在浏览器中访问nginx配置的域名。我们这里只是简单的说说怎么部署静态项目，工作中可能会搞容器部署，自动化什么的也只是把上面的步骤抽离，让程序帮我们去重复上面的动作。
刷新404问题还原和解决方案
相信很多人都有遇到过，那么你知道其真正的原因吗？
我们先还原一下问题出现：
vue项目在本地时运行正常，但部署到服务器中，刷新页面，出现了404错误
先确定一下问题，HTTP 404 错误意味着链接指向的资源不存在
问题在于我已经部署了为什么不存在静态文件？而且只有history模式下会出现这个问题？
-
为什么hash模式下没有问题
router hash 模式我们都知道是用符号#表示的，如baidu.com/#/login, hash 的值为 #/login。它的特点在于：hash 虽然出现在URL中，但不会被包括在 HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新加载页hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如baidu.com/#/login只有baidu.com 会被包含在请求中 ，因此对于服务端来说，即使没有配置location，也不会返回404错误 -
404错误的解决方案
看到这里我相信大部分同学都能想到怎么解决问题了，产生问题的本质是因为我们的路由是通过JS来执行视图切换的，当我们进入到子路由时刷新页面，web容器没有相对应的页面此时会出现404所以我们只需要配置将任意页面都重定向到 index.html，把路由交由前端处理对nginx配置文件.conf修改。我这里是把这里一些问题单独抽离开了一个location，正常只需添加try_files $uri $uri rewrite ^.*$ /index.html;
server {
listen 80; # 监听80端口
server_name www.xxx.com; # 访问的域名
location / {
root /www/wwwroot/mie-app; # 存放静态文件的路径
index index index.php index.html index.htm default.php default.htm default.html; # 默认访问的文件
}
# 解决vue histroy模式下访问404错误nginx配置
location / {
try_files $uri $uri @router;
}
location @router {
rewrite ^.*$ /index.html;
break;
}
}
- 还有一种最简单的方案
每次去手动去改路由配置，在本地跑的时候，用histroy模式，打包构建的时候用hash模式。当然了也能单独配置下我说的这样的，就不需要每次手动改。我这里就不推荐这样的方式，就不细说了。
评论区