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 相关文章推荐
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
php实现简单的上传进度条
2015/11/17 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
vuex实现简易计数器
2016/10/27 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
深入理解python函数递归和生成器
2016/06/06 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
python绘制多个曲线的折线图
2020/03/23 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
销售心得体会
2014/01/02 职场文书
顶撞领导检讨书
2014/01/29 职场文书
学生自我评价范文
2014/02/02 职场文书
销售经理竞聘书
2014/03/31 职场文书
《泉水》教学反思
2014/04/11 职场文书
财务审计整改报告
2014/11/06 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
课外活动实习计划
2015/01/19 职场文书
Mysql中mvcc各场景理解应用
2022/08/05 MySQL