vue-cli在 history模式下的配置详解


Posted in Javascript onNovember 26, 2019

背景:自己搭了vue测试项目,使用的是history模式,放在后台,一开始进入项目没什么问,但是再一刷新页面就404了,what?当时的比较懵逼,为啥呢?因为之前写过项目上线过是好用的啊,这个项目按照那个写的啊,但是解压项目zip文件之后发现,WEB-INF没有引入,瞬间就WC了,为了以防自己犯这种SX的问题浪费时间,所以打算记录下history的配置

1、配置router/index.js

vue-cli在 history模式下的配置详解

2、build/utils.js

vue-cli在 history模式下的配置详解

3、webpack.prod.conf.js,这里配置因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

这里可以看官网文档:https://router.vuejs.org/zh/guide/essentials/history-mode.html

vue-cli在 history模式下的配置详解

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xmlns="http://xmlns.jcp.org/xml/ns/javaee"
   xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee/web-app_2_5.xsd"
   id="scplatform" version="2.5">

 <display-name>/</display-name>

 <error-page>
 <error-code>404</error-code>
 <location>/index.html</location>
 </error-page>

</web-app>

再配置webpack.prod.conf.js,因为我使用了friendly-errors-webpack-plugin压缩插件,打包成zip包

vue-cli在 history模式下的配置详解

配置到这里就结束了,希望可以给大家一点点帮助,主要是给自己看^v^!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
js实现淘宝首页的banner栏效果
Nov 26 #Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 #Javascript
vue实现pdf文档在线预览功能
Nov 26 #Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 #Javascript
使用Vue生成动态表单
Nov 26 #Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 #Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 #Javascript
You might like
Protoss兵种对照表
2020/03/14 星际争霸
PHP4实际应用经验篇(6)
2006/10/09 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
浅谈PHP的反射机制
2016/12/15 PHP
JQuery从头学起第三讲
2010/07/06 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
基于Python闭包及其作用域详解
2017/08/28 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
犯错检讨书
2014/02/21 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
唐山大地震的观后感
2015/06/05 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
javascript对象3个属性特征
2021/11/17 Javascript