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

这篇具有很好参考价值的文章主要介绍了路由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文章来源地址https://www.toymoban.com/news/detail-606387.html

到了这里，关于路由hash模式改成history模式的前端vue配置与后端配置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！