VUE 线上部署 路由history模式中，刷新空白页面

VUE部署开发环境 history 页面空白处置

今天在部署VUE线上环境的时候，遇到了问题，在VUE路由中设置了history模式，导致打包后，在页面上出现了空白页面。以下是处理方法；

VUE中路由配置

在路由中配置history模式。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
    mode: 'history',
    base: '/',
 })

Nginx 配置文件

在Nginx中将 路由的路径都指向index.html,因此用try_files $uri $uri/ @rewrites,拦截url,再在@rewrites中写入泛型正则^.*$,再重定向/index.html last。

server {
    listen 81;
    server_name  localhost;
    location / {
	    alias /home/hanya/temp/Vue-Dome_app/apptrade/;
	    index index.html index.htm;
	    try_files $uri $uri/ @rewrites;
    }
    location @rewrites {
        rewrite ^.*$ /index.html last;
    }
 }