nginx 所有页面指向index.html

问题描述：

之前使用Vue框架，利用vue-route+webpack编写了一个单页路由项目，服务器端配置nginx。部署完成后，访问没问题，从页面中点击跳转也没问题，但是通过浏览器刷新或者地址栏回车，就会出现404问题

问题原因：

由于项目中，我没有使用hash的方式去访问，而是使用了vue-router的history模式：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

而在nginx配置的根目录里，由于只存在index.html，而未找到其他对应的文件，所以导致返回404。

问题解决：

这里我们只需要将nginx配置里的url重新指向到index.html就行了。

server {
	listen 80;
	server_name localhost;
	root /website;
	
	location / {
		try_files $uri $uri/ /index.html;    
	}
	location =/index.html {
		index index.html;
	}
}

$uri表示当前的访问路径，如果访问路径存在的话，则返回原本的$uri，否则指向index.html

注意：

由于所有未找到的路径都会被指向到index.html，所以在route里要覆盖所有未定义的路径，指向到404页面

{
    path: "*",
    meta: {
      title: "404 | HSUAN"
    },
    component: resolve => require(["views/common/404.vue"], resolve)
}