解决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 相关文章推荐
js 日期转换成中文格式的函数
Jul 07 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 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
PHP的开合式多级菜单程序
2006/10/09 PHP
在php中取得image按钮传递的name值
2006/10/09 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
Javascript hasOwnProperty 方法 & in 关键字
2008/11/26 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
python中关于for循环的碎碎念
2017/06/30 Python
python中的字典操作及字典函数
2018/01/03 Python
python操作mysql代码总结
2018/06/01 Python
django 将model转换为字典的方法示例
2018/10/16 Python
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
工程造价管理专业大专生求职信
2013/10/06 职场文书
营销总经理岗位职责
2014/02/02 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
2014村务公开实施方案
2014/02/25 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
残疾人小组计划书
2014/04/27 职场文书
董事长助理工作职责
2014/06/08 职场文书
督导岗位职责
2015/02/04 职场文书
python多次执行绘制条形图
2022/04/20 Python