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 相关文章推荐
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
常用的javascript设计模式
Jan 11 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
js实现返回顶部效果
Mar 10 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
细说Vue组件的服务器端渲染的过程
May 30 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
一个简单计数器的源代码
2006/10/09 PHP
Php Cookie的一个使用注意点
2008/11/08 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
Laravel5中contracts详解
2015/03/02 PHP
php实现的简单检验登陆类
2015/06/18 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
python 杀死自身进程的实现方法
2019/07/01 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
抄作业检讨书
2014/02/17 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
党章培训心得体会
2014/09/04 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
信用卡工资证明范本
2015/06/19 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
python之json文件转xml文件案例讲解
2021/08/07 Python