路由hash模式改成history模式的前端vue配置与后端配置

示例项目地址：http://172.00.00.000:8888/Web/static/index.html/index ,其中：
/Web/static/ 表示项目部署路径，每个人的路径不一样，vue默认路径是根路径/，如果你项目不是部署在根路径，那就需要修改一些配置
index.html 表示项目入口文件
/index 表示项目首页的路由地址

vue前端配置
1.配置路由history模式并配置base

const router = new VueRouter({
  routes,
  mode: 'history', // 必须，将路由改为history模式
  base: '/Web/static/index.html/' // 可选，默认为/表示根路径，如果你的项目部署在根路径则不需要配置这个属性，否则需要像这样配置，这样在history模式下每次路由跳转都会将这个base值加入url里面
})

2.vue.config.js中修改publicPath属性

// vue.config。js
module.exports = {
  publicPath: '/Web/static/' // 可选，默认值为/表示根路径，如果你的项目部署在根路径则不需要配置这个属性，否则需要像这样配置，这样在history模式下会去往这个绝对路径寻找静态资源
}

当然前面的配置都是基于生产环境，要想不影响开发环境，可以判断一下：

base: process.env.NODE_ENV === 'production' ? '/Web/static/index.html/' : '/'
publicPath: process.env.NODE_ENV === 'production' ? '/Web/static/' : '/'

后端配置
history模式需要后端配合，具体的后端配置可以在网上找到，方法是获取不到资源时将url重写到 /index.html
特别注意的是，如果你的项目没有部署在根路径，那么你需要写入完整路径，例如 /Web/static/index.html