nginx服务器上部署vue项目，刷新或者打开新窗口时出现404的解决方法

前言

• 最进写了一个小项目，前端用vue来写的，后端用SSM写的，后端的项目已经在服务器正常运行起来了，而前端一直在Idea上运行，还没有对项目打包在生产环境运行。
• 突发奇想，想把前端的项目也部署在服务器上运行。我先在本地模拟部署了一下，发现在打开新窗口或者界面刷新的时候出现了404的错误。

问题分析和解决方案

• 404异常表示我们的服务器上没有对应的URL资源，我们发现当前刷新的路径是localhost:8888/home，在nginx的配置中默认访问dist/index.html，在初次访问时，路由到home界面。

location / {
      root   dist;
      index  index.html index.htm;
 }

• 在dist目录下没有localhost:8888/home 的对应资源。
  
• 分析到这里，其实原因已经出来了，Vue是单页面应用(SPA，只有一个index页面)，但是要实现界面的切换，就必须使用VueRouter（路由），在vue中其路由默认使用的是hash模式，会在URL中嵌入#号，目的是为了防止向服务器发送请求，而此时我们用的是history模式，该模式下的URL会正常的向服务器发送请求，而服务器中却没有对应路径的资源，因此就出现了404。
  所以，第一种解决方案就是不使用history模式

// 创建路由对象
// http://localhost:8888/#/home hash不会向服务器发送请求
const router = new VueRouter({
	// mode: "history",
	routes,
})；

• 但是，hash路径看着有点不顺眼！使用history模式应该怎么解决？作为单页面的应用，无论浏览器路径怎么改变，浏览器本质上还是在index.html页面，并不是真正的访问当前看到的URL资源，所以我们只需要给服务器在访问不到资源的时候，仍然访问index.html即可！
• 在nginx.conf添加try_files $uri $uri/ /index.html;

 location / {
        root   dist;
        index  index.html index.htm;
        # 大概意思就是uri怎么改变都返回index.html页面
	    try_files $uri $uri/ /index.html; 
 }

至于其他服务器，配置方式可能不同，但是基本原理都是一样的！

注意：这么配置访问有一个问题——所有匹配不到的URL路径都会返回index.html。具体解决办法可参考官方文档，里面有更详细的说明：HTML5 History 模式