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;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值