解决vue+webpack打包路径的问题
时间:2019-04-13
本文章向大家介绍解决vue+webpack打包路径的问题,主要包括解决vue+webpack打包路径的问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近写了一个vue小项目,不想单独作为一个web项目发布,所以就准备放到资源项目的public文件夹下,遇到一些小问题,在此总结一下。
资源路径如下:
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打包路径的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- github & CSRF
- 如何使用Python读取大文件
- 介绍一种非常好用汇总数据的方式GROUPING SETS
- 史上最大的CPU Bug(幽灵和熔断的OS&SQLServer补丁)
- 数据库副本的自动种子设定(自增长)
- Git 项目推荐 | 基于go+protobuff 实现的分布式
- ReflectASM-invoke,高效率java反射机制原理
- Web应用渗透测试-本地文件包含
- shiro权限控制(二):分布式架构中shiro的实现
- Groovy实现原理分析——准备工作
- HBCTF第一场2个pwn题的简单分析
- ACM竞赛之输入输出(以C与C++为例)
- 能让程序做的事情坚决不用人来做——批量修复markdownlint MD034警告
- swift demo1 tableview
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 第05期:使用 prometheus 监控 clickhouse 集群
- 这 6 点知识让我对 JavaScript 的对象有了更进一步的了解
- Linux进程间通信(中)之信号、信号量实践
- Linux进程间通信(下)之共享内存实践
- 手把手教你快速使用Vmware虚拟机安装Linux操作系统实验环境
- 天啊!鹅厂都开始做开发板了?网红腾讯物联网开发板终极开箱评测,让我们一睹为快!
- 我用 React 和 Vue 构建了同款应用,来看看哪里不一样(2020 版)
- 大点干!早点散----------深入剖析Redis集群原理与实验
- 微信群总是有人发广告?看我用Python写一个自动化机器人消灭他!
- 苏宁基于 ClickHouse 的大数据全链路监控实践
- CORS Cross Origin Resource Sharing
- 从0开始做播放器-第二季-第2章-Android NDK 工程的建立和 JNI 的基本用法
- 记一次线上问题排查-maven父子结构依赖所遇到的坑
- 『技术随手学』解决 pip conda install 网络故障中断
- boost asio