问题解决:vue dev模式没问题,dist之后页面not found


导读: 本菜鸡作为一个JavaScript的初学者,搞了一个Vue页面之后想将其在生产环境中部署。但是dist之后发现生成的静态页面只有首页访问正常,其余页面全部都是Not Found,百思不得其解。经过调查解决了问题。将自己学习和思考过程记录下来,供后来的人一个参考。

SPA单页谈起

要想解决dist之后 not found问题,首先要理解Vue的SPA单页特性,首先来看一下SPA定义:

单页Web应用(single page web application,SPA),就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript,所有的操作都在这张页面上完成,都由JavaScript来控制。

你也可以看到dist打包后的Vue文件,不管你在开发模式做了多少个路由跳转和页面。最后打包生成dist文件夹之后,里面只会有一个.html文件。后面的所有页面操作全部都是通过编译后的JavaScript来完成的。也就是说,你访问不同的URL,页面的渲染不是通过加载不同的html文件实现,而是通过JavaScript对index.html的不同改造实现的。

明白了上面的道理之后就可以明白,为什么在dev模式下没问题,而生成dist之后只能访问首页,而其他页面会not found了。

比如你使用的是history的路由模式,在dev模式下,你访问不同的页面&

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Einstellung

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值