解决vue+webpack打包路径的问题


Posted in Javascript onMarch 06, 2018

最近写了一个vue小项目,不想单独作为一个web项目发布,所以就准备放到资源项目的public文件夹下,遇到一些小问题,在此总结一下。

资源路径如下:

解决vue+webpack打包路径的问题

public目录配置的访问路径为”/”,在这样的情况下,我们的访问路径就变成了”域名/vue-demo”。访问的时候发下程序未报错,但是页面一片空白。此前也这样发布的项目都没有问题,但这次是怎么回事呢?

仔细探索后发现是vue-router搞得鬼。因项目需要,所以使用了滚动行为,滚动行为必须开启history模式,在vue-router官方文档中有这么一句话:

当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!

不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

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

而我们vue-router监听的路径还是”/”与”/component”,自然路径匹配不上。

所以我们需要修改routes,给每个path加上项目名,即”/vue-demo”,同时为了保证资源文件正确加载,打包时的 publicPath 也需要加上”/vue-demo”。

完毕!!

以上这篇解决vue+webpack打包路径的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Json对象替换字符串占位符实现代码
Nov 17 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
完美解决js传递参数中加号和&号自动改变的方法
Oct 11 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
关于使用js算总价的问题
Jun 23 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 #Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 #Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 #Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 #Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 #Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 #Javascript
node的process以及child_process模块学习笔记
Mar 06 #Javascript
You might like
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
获取url中用&隔开的参数实例(分享)
2017/05/28 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
Python内建模块struct实例详解
2018/02/02 Python
python保存网页图片到本地的方法
2018/07/24 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
python pycharm的安装及其使用
2019/10/11 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
财务助理岗位职责
2013/11/10 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
保安2014年终工作总结
2014/12/06 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
护理工作个人总结
2015/03/03 职场文书
采购员岗位职责范本
2015/04/07 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
python如何将mat文件转为png
2022/07/15 Python