vue-router实现history模式配置（生产环境路由失效跟刷新404问题）

原文链接：https://blog.csdn.net/ZhushiKezhang/article/details/122843264

1、vue-router配置history模式

const router = new VueRouter({
 
  // mode: "hash", 默认是hash
 
  mode: "history",
 
  routes
 
});
1
2
3
4
5
6
7
8
9

使用history模式通常本地调试没有什么问题，但是一旦发布到测试或生产环境，则会出现页面白屏或者刷新页面白屏的现象，这种问题的出现是因为前端和服务端没有做相应的配置。

2、配置nginx解决路由失效问题

location /test-daily表示项目部署在了 /test-daily目录下，这里要跟vue.config.js里的publicpath的值保持一致。

3、如果应用部署在子路径下

http://…com/test-daily/index.html
test-daily是你是项目包名

需要配置base为该项目名：

const router = new VueRouter({
 
  // mode: "hash", 默认是hash
 
  mode: "history",
  base: "test-daily",
  routes
 
});
1
2
3
4
5
6
7
8
9

4、配置webpack中的publicPath

module.exports = {
  // publicPath默认值是'/'，即你的应用是被部署在一个域名的根路径上
  // 设置为'./'，可以避免打包后的静态页面空白
  // 当在非本地环境时，这里以项目test-daily为例，即打包后的h5项目部署服务器的test-daily目录下
  // 那么这里就要把publicPath设置为/test-daily/，表示所有的静态资源都在/test-daily/里
  // 打包部署后，会发现index.html引用的静态资源都添加了路径/test-daily/
  publicPath: process.env.NODE_ENV == 'development' ? './' : '/test-daily/',
  
 
1
2
3
4
5
6
7
8
9
10