Vue-CLI3项目部署

::: tip 前言
自己在部署Vue项目到服务器上后，遇到刷新页面出现404的问题(history模式)，而路由如果使用hash模式，则不会出现问题，这篇文章主要整理一下出现问题的原因以及解决办法

:::

为什么history模式下有问题🎉

Vue是属于单页面应用，也就是SPA

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，

关键在这里，当我们在 www.xxx.com/login 页执行刷新操作，nginx location 是没有相关/login配置的，所以就会出现 404 的情况

为什么hash模式下没有问题 🎉

router hash 模式我们都知道是用符号#表示的

特点：

• hash 虽然出现在URL中，但不会被包括在HTTP 请求中，对服务端完全没有影响
• 所以改变hash不会重新向服务端发送请求，而改变hash，在hash模式中会被hashChange方法捕获，在Vue中会触发页面的修改
• hash模式下，只有hash符号之前的内容会被包含在请求中，所以即使没有配置location，也不会返回404错误

解决方案🎉

1. 路由使用hash模式

很显然，这样问题会直接解决，但是看着地址栏中的#号，还是不太舒服

2. 修改nginx配置文件

    listen       80 default_server;
    listen       [::]:80 default_server;
    server_name 175.24.527.47;// 服务器ip地址
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/dist.com; // vue文件得目录
    
    location / {
      #访问前端页面
    	root /www/wwwroot/dist.com;#vue项目存放路径
    	index  index.html; #hash模式只配置访问html就可以了
    	try_files $uri $uri/ /index.html;#history模式配置否则会出现vue的路由在nginx中刷新出现404
    }

3.以宝塔面板举例

3.1 打开软件商店找到nginx

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AJqFf8dF-1651569064643)(/assets/img/nginx1.png)]

3.2 打开设置，查看nginx配置文件存放目录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8riKwm3E-1651569064646)(/assets/img/nginx2.png)]

3.3 进入配置文件目录，打开要修改Vue项目的配置文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KCl4YZ3q-1651569064647)(/assets/img/nginx3.png)]

3.4 修改配置文件，添加配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YvtSHxzi-1651569064647)(/assets/img/nginx4.png)]

3.5 完成之后，记得重载配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oUdxeTMN-1651569064648)(/assets/img/nginx5.png)]
vtSHxzi-1651569064647)]

3.5 完成之后，记得重载配置

[外链图片转存中…(img-oUdxeTMN-1651569064648)]