vue之history路由踩坑

由于之前一直用hash路由，基本上没什么坑，这次由于一些特殊原因，项目得采用history路由，在开发的时候基本没什么问题，当项目做完后，发布到服务器的时候就有问题，首先是页面空白，然后是刷新或直接访问页面时出现404错误。下面就这两个问题来总结一下。

1.页面空白

页面空白的问题主要是因为没有把项目部署在服务器的根目录上，导致无法访问。如果不部署在根目录下，需要设置以下几个配置。

修改vue.config.js 文件

module.exports = {
    publicPath: '/web-form/',
    outputDir: 'web-form'
}

web-form为项目部署的名称。

修改router.js

const router = new VueRouter({
  mode: 'history',
  base: '/web-form/',
  routes
})

配置base为项目的部署名称。

2.404错误

404错误需要修改服务器配置。下面主要介绍下tomcat和Nginx的配置方式。

tomcat

在部署包文件夹下创建WEB-INF,然后创建web.xml文件，如下所示：

    Router for Tomcat
    
        404
        /index.html
    

Nginx

修改nginx.conf文件

location /web-form {
            index  index.html index.htm;
            try_files $uri $uri/ /web-form/;
        }