vue路由用history刷新会404

vue项目的路由使用history模式,然后刷新页面,居然报404。有的说改成hash,然而路由又不想出现“#”。有的说修改nginx,好家伙,我本地起的vue项目,哪来的nginx。

原文链接:vue路由用history刷新会404

解决vue路由用history刷新会404的正确姿势

你们知道后会直呼:就这?
我项目是用vue-lic搭建的,所以直接在vue.config.js加入如下代码:

publicPath: '/',

emmmm,你们应该知道把这行加那吧,不知道的话可以看看官网的教程:vue.config.js配置。
我给个示范:

module.exports = {
  // 基本路径,如果是生产(也就是run build) 那么生成的 index.html 文件,引入的js,css路径前缀会是 /
  publicPath: '/',
  // 用于存放静态资源(js、css、img、fonts)
  assetsDir: 'static',
  // 输出文件目录
  outputDir: 'dist_pc',
  // 不生成映射文件
  productionSourceMap: false,
  // 接口代理
  devServer: {
    proxy: {
      // 请求https,代理写前面
      "/api":{
        target:"https://www.xxxx.com",
        secure: false,   // 如果是https接口,需要配置这个参数
        changeOrigin: true,    //是否跨域
        // pathRewrite: {
        //   '^/api': '/' //通过pathRewrite重写地址,将前缀/erwm转为/
        // }
      },
    }
  }
};

项目上线解决方案

项目上线后就真的是改nginx,在伪静态里加入:

location / {
  try_files $uri $uri/ @router;
}

location @router {
  rewrite ^.*$ /index.html last;
}

版权声明:本文为sinye_原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。