vue之history路由

一.页面空白
页面空白的问题主要是因为没有把项目部署在服务器的要目录上，导致无法访问。如果不部署在要目录下，需要设置以下几个配置
1.修改vue.config.js 文件

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

web-form为项目部署的名称

2.修改router.js

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

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

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

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

<?xml version="1.0" encoding="UTF-8"?>
<web-app
    xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"    version="3.1" metadata-complete="true">
    <display-name>Router for Tomcat</display-name>
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

Nginx
修改nginx.conf文件

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

还有一种情况可能是devServer proxy设置与访问的后端接口地址中有重名导致404