Vue项目部署问题及解决方案-阿里云开发者社区

开发者社区> 半指温柔乐> 正文

Vue项目部署问题及解决方案

简介: Vue项目部署问题及解决方案 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式。 hash:也就是地址栏里的 # 符号。比如 http://www.example/#/hello,hash 的值为 #/hello。
+关注继续查看

Vue项目部署问题及解决方案

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 只是利用了这两个特性(底层还是浏览器提供的接口)来实现前端路由。

1、使用场景

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

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

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

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

2、问题起因

在做「年度账单」项目的时候,项目部署的时候,用的是 hash 模式。APP安卓端分享出去的链接对于 # 做了特殊处理,encode 转义成了 %23,所以路由只能换成 history 的模式。因此,现把解决的思路总结下,虽然 官网 上给出了解决方案,但在实际的编码中也遇到了一些问题。

(1)根目录下

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

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

$uri 就是访问的 url,不包含 域名 和 querystring。例如 /test/hello 当访问 $uri 时,如果存在,则访问 $uri/, 不存在就访问 /index.html 这样配置好,访问 http://example.com/ 时就可以访问到网站了,进入多级目录后刷新页面也不会存在问题。

(2)子级目录下

  这里涉及到修改 vue 项目几个配置文件。先定义几个环境

  • 部署的域名:http://www.example.com:8080/
  • nginx 的 root 目录:home/web/
  • vue 的部署路径:home/web/h5-year-bill/
  • vue 项目的链接:http://www.example/h5-year-bill/
  • vue 项目的静态资源路径:http://www.example/h5-year-bill/static/

修改1:打包后的静态资源路径需要修改

找到 build/config/index.js,代码如下:

1 ...
2 build: {
3 ...
4 -    assetsPublicPath
5      // 访问路径,修改成绝对路径
6 +    assetsPublicPath: '/h5-year-bill/'
7 }

修改2:路由文件
Vue-Router 有一个 base 属性, 传送门

base
类型: string
默认值: "/"
应用的基路径。例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"

  因此,找到 src/router/index.js,代码如下:

 1 // 不影响本地开发,兼容性做了处理
 2 const isHistoryMode = process.env.NODE_ENV === 'production' ? {
 3   mode: 'history',
 4   base: '/h5-year-bill/'
 5 } : {
 6   mode: 'hash'
 7 };
 8 
 9 const router = new Router({
10   ...isHistoryMode,
11   routes
12 });

至此,打包配置的相关修改已全部完成,项目也能够正常访问。

但还是会有一个问题,跳转到某个路由后,刷新页面,就会出现页面空白,或者路由不通,此时就要修改 nginx 的配置了。

修改3:nginx 配置相关修改

nginx部署路径/conf/nginx.conf,修改如下:

1 #h5-year-bill
2 location ^~ /h5-year-bill {
3     root   /home/web;
4     index  index.html;
5     try_files $uri $uri/ /h5-year-bill/index.html last;
6 }

/h5-year-bill/ 就是部署的网站目录。

这样几项配置后,就可以在子目录下访问网站,刷新也没有问题。

                                                                          




版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
解决提交项目到GitHub,报错Please tell me who you are的问题
描述:         在第一次提交项目到GitHub时,出现了以下问题                  看了一下错误原因:Run git config --global user.email "you@example.
1609 0
Spring Boot项目字符集乱码解决方案
今天打开自己做的商品操作后台,在操作的过程中发现添加的商品乱码。折腾了一番,最终解决了,记录下解决方案。 1、我在本地开发的时候,进行操作是不会乱码的,但是部署到服务器上就乱码了,这个时候应该排除是项目的乱码问题。
755 0
导入他人项目时以及run键旁边app出现红叉问题的一个解决方法
在导入他人项目时或者出现下面情况(run键旁边app出现红叉)时候: 笔者自己实践过,只要在本地新建一个或者找一个可以跑通的项目,然后将这个可以跑通的项目的下图中的三个文件复制,覆盖在出问题的项目对应的文件上,即可 ...
538 0
VS2010无法保存项目文件(.csprj)的问题解决方法
VS2010无法保存项目文件(.csprj)的问题解决方法   【出错提示】保存项目文件“XXX”时出错。类没有注册。正在查找具有CLSID的对象:{D9B3211D-E57F-4426-AAEF-30A806ADD397}。
968 0
J2EE 第二阶段项目之部署项目、分工安排
 SVN    先通过使用教程,和能够介绍了解svn.    svn使用教程总结   ;   svn功能介绍。   分工安排:我的任务就是项目统计。                                            1 效益统计                ...
596 0
Unity 之 关于UnityHub无法打开项目的问题(弹出Unity启动界面有退回到Hub选择工程界面)
弹出Unity启动界面有退回到Hub选择工程界面方案一:万能的重启大法;方案二:未开启许可证;方案三:终极奥义 -- 弃用Hub
92 0
+关注
半指温柔乐
热衷于研究前端新知识,学习新技术。精通HTML5+CSS3,Javascript,jQuery,Angular,Bootstrap。
245
文章
205
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载