资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

详解Vue项目部署遇到的问题及解决方案-创新互联

写在前面

10年积累的成都网站设计、网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有秦皇岛免费网站建设让你可以放心的选择与我们合作。

Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式。

  • hash:也就是地址栏里的 # 符号。比如 http://www.example/#/hello,hash 的值为 #/hello。特点:hash 虽然出现 URL 中,但不会被包含在 HTTP 请求中,对后端不会产生什么影响,改变 URL 不会重载页面。
  • history:利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法,来完成 URL 跳转而无须重新加载页面。(需要特定浏览器支持)

hash 和 history 两种模式都是基于浏览器自身的属性,vue-router 只是利用了这两个特性(底层还是浏览器提供的接口)来实现前端路由。

使用场景

一般来说,两种模式都是可以的。除非在意不太漂亮的 #,只能选择 history。

这两种模式在开发环境下都没有什么太大的问题,但是当部署到生产环境中后,两者有所不同。

hash 模式部署没有什么问题,只要访问到服务器上的 index.html,就可以访问网站了。
history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.example.com/user/id。如果后端缺少对 /user/id 的路由处理,将返回 404 错误。

不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。- Vue-Router

问题起因

在做「年度账单」项目的时候,项目部署的时候,用的是 hash 模式。APP安卓端分享出去的链接对于 # 做了特殊处理,encode 转义成了 %23,所以路由只能换成 history 的模式。

因此,现把解决的思路总结下,虽然 官网 上给出了解决方案,但在实际的编码中也遇到了一些问题。

根目录下

当项目在根目录下部署的时候(如 http://www.example.com/),vue 的相关文件默认不需要修改,修改的是后端,这里以 nginx 为例。

location / {
 try_files $uri $uri/ /index.html;
}

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


新闻标题:详解Vue项目部署遇到的问题及解决方案-创新互联
文章转载:http://cdkjz.cn/article/dgsjgs.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220