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 相关文章推荐
你可能不再需要JQUERY
Mar 09 Javascript
Jquery iframe内部出滚动条
Feb 11 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
一分钟理解js闭包
May 04 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
vue+echarts实现多条折线图
Mar 21 Vue.js
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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
Linux中为php配置伪静态
2014/12/17 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
python实现telnet客户端的方法
2015/04/15 Python
Golang与python线程详解及简单实例
2017/04/27 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
Python向excel中写入数据的方法
2019/05/05 Python
python3获取当前目录的实现方法
2019/07/29 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
自我评价个人范文
2013/12/16 职场文书
委托培训协议书
2014/11/17 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
如何在python中实现ECDSA你知道吗
2021/11/23 Python
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers