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;
}