vue 指定index.html,vue history模式下进入到index.html 404

当尝试访问http://xxx/xxx/index.html时出现404错误,原因是Vue项目的路由配置问题。要使index.html也能访问首页,需要在Vue的router配置中将index.html映射到首页组件,并在服务器配置中设置404重定向到index.html。例如,在nginx中使用try_files指令实现。此外,确保Vue项目打包后是单页应用,路由主要依赖于路径来切换页面。
摘要由CSDN通过智能技术生成

访问页面http://xxx/xxx/index可以正常访问

但是访问http://xxx/xxx/index.html 就会跳到404

这个是怎么回事啊

:可不可以访问index.html也能进到首页

回答

首先,你的项目是vue的

那么,index和index.html分别代表的不同路由,一个对一个错当然是正常的

想要index.html也能访问的话你可以把router内添加对应的页面映射就行了,也就是说index和index.html指向同一component

服务器要配置,404 访问指向 index.html。如果是 nginx,用 try_files 即可:

location / {

try_files $uri $uri/ /index.html$args;

}

首先需要说明的是,vue项目打包之后实际上生成的是单页面项目,顾名思义里面只有一个html文件。是为了减少静态文件的请求,减少服务器压力。

以往要加.html实际上是在服务器上面找到html文件并返回到客户端。

但是在vue项目当中不需要这么做,是根据路由的名字进行页面的切换的。根据router文件当中的path进行匹配来跳转的。

所以你要是想要index.html跳转效果和index一样,就得加个配置,path为index.html,重定向到index

如下例

{ path: "/index.html", redirect: { name: "index" } },

{

path: "/index",

name: "index",

component: () => import("@/views/index")

},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值