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
只是利用了这两个特性(底层还是浏览器提供的接口)来实现前端路由。
使用场景
一般来说,两种模式都是可以的。除非在意不太漂亮的 #
,只能选择 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;
}
$uri
就是访问的 url,不包含 域名
和 querystring
。例如 /test/hello
当访问 $uri
时,如果存在,则访问 $uri/
, 不存在就访问 /index.html
这样配置好,访问 http://example.com/
时就可以访问到网站了,进入多级目录后刷新页面也不会存在问题。
子级目录下
这里涉及到修改 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
,代码如下:
...
build: {
...
- assetsPublicPath// 访问路径,修改成绝对路径
+ assetsPublicPath: '/h5-year-bill/'
}
2. 路由文件
Vue-Router
有一个 base
属性, 传送门
base
类型: string
默认值: "/"
应用的基路径。例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"
因此,找到 src/router/index.js
,代码如下:
// 不影响本地开发,兼容性做了处理
const isHistoryMode = process.env.NODE_ENV === 'production' ? {mode: 'history',base: '/h5-year-bill/'
} : {mode: 'hash'
};const router = new Router({...isHistoryMode,routes
});
至此,打包配置的相关修改已全部完成,项目也能够正常访问。
但还是会有一个问题,跳转到某个路由后,刷新页面,就会出现页面空白,或者路由不通,此时就要修改 nginx 的配置了。
3. nginx 配置相关修改
nginx部署路径/conf/nginx.conf
,修改如下:
#h5-year-bill
location ^~ /h5-year-bill {root /home/web;index index.html;try_files $uri $uri/ /h5-year-bill/index.html last;
}
/h5-year-bill/
就是部署的网站目录。
这样几项配置后,就可以在子目录下访问网站,刷新也没有问题。
Vue项目部署遇到的问题及解决方案相关推荐
- Vue 项目部署出现css样式失效的解决方案
Vue 项目部署出现css样式失效的解决方案 参考文章: (1)Vue 项目部署出现css样式失效的解决方案 (2)https://www.cnblogs.com/Desmondexperience/ ...
- ssm项目直接加html文件,如何把ssm项目和vue项目部署在云服务器(上)
如何把ssm项目和vue项目部署在云服务器(上) 如何把ssm项目和vue项目部署在云服务器(上) 一.引入 URL的概念理解 在WWW上,每一信息资源都有统一的且在网上唯一的地址,该地址就叫URL( ...
- vue项目部署到服务器后浏览器标签上的小图标消失不见
背景: 最近在开发项目过程中发现一个问题,项目部署到服务器后在浏览器打开,会发现浏览器标签上的小图标消失不见了.百度查找问题,网上给出了许多解决的方案,例如清除浏览器缓存.把图标的相对路径改成绝对路径 ...
- 将springboot项目和vue项目部署到windows 2016 server(服务器)
将springboot项目和vue项目部署到服务器 1.服务器环境配置 1.1 服务器需要安装的环境 1.2 服务器需要配置的入站与进站规则 2.springboot项目的打包 2.1 springb ...
- linux 退出服务器_Vue实战091:Vue项目部署到nginx服务器
项目开发完成之后我们就需要将项目上线运行供用户访问,这时候我们就需要将项目部署到服务器上.对于Vue这种前端Web项目我们一般都部署在linux系统上,Linux常见的Web应用服务器有Apache. ...
- vue项目部署到nginx
vue项目部署到nginx 一.vue项目打包 修改config/index.js的assetsPublicPath为 ./(注意一定是build里面的,下面dev中也有这个配置) 这个路径的配置很重 ...
- Vue项目部署到CentOS服务器
Vue项目部署到CentOS服务器 config/index.js上修改以下部分: 首先是host:'localhost'改为服务器ip assetsPublicPath:'/'改为assetsPub ...
- vue 项目中遇到的问题及解决方案
vue 项目中遇到的问题及解决方案 参考文章: (1)vue 项目中遇到的问题及解决方案 (2)https://www.cnblogs.com/jackie-song/p/11950835.html ...
- springboot项目部署 + vue项目部署
部署一个简单的前后端分离的博客项目 springboot项目部署 第一步:打包springboot项目(jar包) 第二步:将jar(项目的target目录下)包上传到云服务器上(Xftp) 第三步: ...
最新文章
- 样式集 - 自适应居中弹窗
- 我坦白!我是第五位飞上太空的程序员游客
- 看张悟本神医现象有感
- 函数调用oracle,oracle 函数调用
- mysql mcd date_mysql升级5.5 - ifeixiang的个人页面 - OSCHINA - 中文开源技术交流社区
- jQuery源码研究分析学习笔记-jQuery.extend()、jQuery.fn.extend()(八)
- maven java 结构_Maven标准目录结构介绍
- android命名管道创建使用
- Windows Server 2008 计划任务配置(任务计划程序)每分钟执行BAT
- Hyperledger Fabric Endorsement policies——背书策略
- [SDOI2009]HH的项链 BZOJ1878
- 数据元数据字典元数据
- 电影售票系统项目介绍
- (已成功)windows下,VS2012+Qt5.5.1的安装、路径配置、项目配置(其它版本可参考)
- 银联扫码支付java,银联商务扫码支付-被扫业务
- 大数据的价值体现在哪几个方面,大数据领域未来的技术方向是什么?
- Wordpress搭建笔录
- Spring简述以及AOP、IOC
- Google GMS认证问题
- 后端开发面试自我介绍_一定是最适合你的后端面试指南
热门文章
- 蓝桥杯单片机数码管动态显示_单片机静态动态数码管
- Java 中textarea 换行,textarea 中的换行符
- python变量和对象,切片列表元祖
- [JLOI2016]方
- Codechef August Challenge 2018 : Coordinate Compression
- AY写给国人的教程- VS2017 Live Unit Testing[1/2]-C#人爱学不学-aaronyang技术分享
- server 2008中新建AD域控制器
- Atitit 基于dom的游戏引擎
- Shell Scipt 命令行带参数,输出log
- 管理数据通用权限系统快速开发框架设计