解决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 相关文章推荐
JavaScript 字符串连接性能优化
Dec 20 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
jquery实现倒计时功能
Dec 28 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
js模块加载方式浅析
Aug 12 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
运用js实现图层拖拽的功能
May 24 Javascript
js实现表格数据搜索
Aug 09 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文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
python框架中flask知识点总结
2018/08/17 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
Python configparser模块常用方法解析
2020/05/22 Python
浅谈Python __init__.py的作用
2020/10/28 Python
必须要使用游标的SQL语句有那些
2012/05/07 面试题
Unix如何在一行中运行多个命令
2015/05/29 面试题
奥巴马演讲稿
2014/01/08 职场文书
《假如》教学反思
2014/04/17 职场文书
农业开发项目建议书
2014/05/16 职场文书
计划生育证明格式范本
2014/09/12 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
2014年度安全工作总结
2014/12/04 职场文书
入学证明
2015/06/23 职场文书