解决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居然支持中文(unicode)编程!
Apr 12 Javascript
改写一个简单的菜单 弹性大小
Dec 02 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
精读《Vue3.0 Function API》
May 20 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
解决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实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
php中Snoopy类用法实例
2015/06/19 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
浅谈node的事件机制
2017/10/09 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
Python中关键字is与==的区别简述
2014/07/31 Python
Python复制文件操作实例详解
2015/11/10 Python
Django实现组合搜索的方法示例
2018/01/23 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
优秀部门获奖感言
2014/02/14 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
机关搬迁方案
2014/05/18 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis