vue3+ts+vite+ 路由history模式下，打包部署在本地nginx上，解决刷新404的问题

vue有两种路由模式： hash、history

hash

不需要请求服务器
通过window.onhashchange监听hash的变化，切换相关的页面，如下，修改hash，每次都会输出 hash change!

function locationHashChanged() {

console.log("hash change!");

}

window.onhashchange = locationHashChanged;
ƒ locationHashChanged() {

    console.log("hash change!");

}

history

- 每次修改都会请求到服务器，但是服务器并没有存储我们所有路由信息，一般只配置首页
- 常用ngnix配置路由转发，转发到客户端，由客户端（一般是浏览器）的 History.replaceState() History.pushState() 来修改浏览器会话的历史堆栈，达到更换响应路由的目的。
- 打包后，如果没有在nginx配置，直接访问页面，刷新后404，使用时需要处理
- 接下来使用本地nginx服务器（没有自己的线上服务器，可以本地模拟）来模拟这个场景，步骤如下（以下是mac os系统，window的也大同小异）：
  - 首先本地安装nginx
```
// 1. 安装过程报错，`Error: Command failed with exit 128: git（mac）`
git config --global --add safe.directory /opt/homebrew/Library/Taps/homebrew/homebrew-core    
git config --global --add safe.directory /opt/homebrew/Library/Taps/homebrew/homebrew-cask
//  2. 安装niginx，brew命令需要安装Homebrew才生效
  brew install niginx
//  启动nginx
  nginx
```
  验证是否安装成功：浏览器访问 http://localhost:8080/ 出现以下页面代表nginx安装成功
  - 接下来修改 nginx的配置,让这个路由能够正常访问首先打开 nginx.conf
```
brew info nginx // 查找 nginx相关信息，里边有nginx.conf的路径
open /opt/homebrew/etc/nginx/ // 图形化打开这文件，
```
下面是使用vscode打开了nginx.conf 到这一步，就可以进行配置nginx的转发信息了
- 但是，别急着修改，执行npm run build项目，把生成的dist复制放到 /opt/homebrew/var/www（路径可能不一致，可以通过brew info nginx查询）这里有一个坑点，由于不是放在根目录，而是自定义了一个名称 nft,这会导致静态文件的路径发生改变了，以及相应的路由路径也改变了，所以需要修改以下两点，重新进行打包： vue.config.ts
  
  router
  
  接着重新打包，把打包后的dist改名为nft，再放置到一样的位置（我的是/opt/homebrew/var/www），放置成功后，访问的时候，还是像启动nginx的测试页面一样访问，只是多加了路径名称nft，如http://localhost:8080/nft/，这就成功把生产环境的代码部署到了本地nginx服务器上了，接着配置nginx解决在history模式下，访问404的问题。如果还没有配置，直接打开demo路由，刷新页面后如下：
  
  配置nginx（/opt/homebrew/etc/nginx/），上述我们修改了文件夹的名称，nginx也需要对应修改
```
 location /nft {
     root   html;
     index  index.html index.htm;
     try_files $uri $uri/ /nft/index.html;
 }
```
  接着一定要重启nginx，每一次修改后都要！！
```
sudo nginx -s reload
```
  再看刚刚那个路由，可以看到已经解决了，无论怎么刷新都不会404了