axios请求本地的json文件在打包部署到子目录域名下,路径找不到
前言:
因为要同时部署两个项目,有一个是部署到域名下面的子目录下,如:https://xxx.com/siot-admin
vue 项目中使用axios请求了本地项目的static文件夹下的json文件,使用npm run build 打包后,json文件请求不到报404:

解决办法:
Vue-cli打包后部署到子目录下路径问题
举例,若需要部署到www.***.com/catalog1/catalog2/下,需要更改
config/index.js文件中,build下assetsPublicPath属性为'/catalog1/catalog2/',如下:
build: {
assetsPublicPath: '/catalog1/catalog2/',
默认情况下该值为'/'(该属性目测是webpack打包时的文件引用路径的基础路径,一级域名下这里应该写成“./”)。
2.修改路由base属性为'/catalog1/catalog2/',如下:
export default new Router({
// mode: 'history',
base: '/catalog1/catalog2/', //这个一定要加上
routes: [
{
path: '/',
name: 'indexContent',
component: indexContent
}
]
})
其中mode设置为'history'可清除路径中的#(本地测试有效)。
设置完成后重新打包。

问题二: static里面的 font字体在打包后也找不到了

这个字体文件报404
解决办法:
在build/utils文件中的下图所示位置添加../../公共路径

这样打包的iconfont字体文件路径时就会加上../../了。引用就没问题了。而不再需要手动更改css文件中的路径。

axios请求本地的json文件在打包部署到子目录域名下,路径找不到的更多相关文章
- 解决axios请求本地的json文件在打包后路径出错问题
vue 项目中使用axios请求了本地项目的static文件夹下的json文件,使用npm run build 打包后,在Hbuilder编辑器打开,页面报错404: 在浏览器打开的路径 http:/ ...
- ajax和axios请求本地json数据对比
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...
- 谷歌通过ajax获取本地JSON文件,为什么会显示跨域?转载的
在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 谷 ...
- 谷歌通过ajax获取本地JSON文件,为什么会提示跨域?
在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 下 ...
- 读取本地的json文件
最近写项目需要读取本地的json文件,然后悲催的发现前端新手的我居然不会,查查找找发现这东西并不难,但是应该是比较常用的,毕竟json太好用了! 我是直接用的jquery实现的,但是Ajax也可以,不 ...
- vue使用axios请求本地json文件出现404
之前的路径是这么写的,一直出现404,后来发现必须是http的才可以,这样是无法请求的 把路径改为以下 位置根据json文件决定,但是必须是http://localhost:断口号
- axios请求本地json
在vux的项目中 1,首先,json文件的位置: 原因: 访问服务器文件,应该把 json文件放在最外层的static文件夹,这个文件夹是vue-cli内置服务器向外暴露的静态文件夹 2,一定要用 ...
- vue脚手架用axios请求本地数据
首先需要声明的是:本地请求,不用考虑跨域问题,这适用刚入坑的前端小白看,小白在做自己的项目时,通常都是用自己写的json数据,之后用axios请求过来,渲染到页面上. 1.cnpm install a ...
- 从MongoDB里面取得json格式的数据,然后存为本地的json文件,然后再从json读取变为dict
帮宣传下彩印网(www.caiyin.com) 有印刷,广告等等方面的需求就找这个网站吧,没错的. 天气预报在MongoDB中的天气预报的存储方式是: /* 1 */ { "_id" ...
随机推荐
- Python和C++的混合编程(使用Boost编写Python的扩展包)
想要享受更轻松愉悦的编程,脚本语言是首选.想要更敏捷高效,c++则高山仰止.所以我一直试图在各种通用或者专用的脚本语言中将c++的优势融入其中.原来贡献过一篇<c++和js的混合编程>也是 ...
- Java 技术笔记
vlist提取字段生成新list List<int> uidList = urResult.stream().map(p -> p.getUserId()).collect(Coll ...
- python:数据库连接操作入门
模块 import pymssql,pyodbc 模块说明 pymssql和pyodbc模块都是常用的用于SQL Server.MySQL等数据库的连接及操作的模块,当然一些其他的模块也可以进行相应的 ...
- docker 常用命令和使用
首先安装Docker CE 在ubantu上,参照https://docs.docker.com/install/linux/docker-ce/ubuntu/#set-up-the-reposito ...
- NET快速信息化系统开发框架 V3.2 -> “用户管理”主界面使用多表头展示、增加打印功能
RDIFrameowrk.NET 用户管理是使用非常频繁的模块,由于需要展示的字段比较多,以前的展示方式显得不是太规范,现3.2版本用户管理主界面进行了全新的设计,数据列表展示使用了Dev家族全新的G ...
- 超详细“零”基础kafka入门篇
1.认识kafka 1.1 kafka简介 Kafka 是一个分布式流媒体平台 kafka官网:http://kafka.apache.org/ (1)流媒体平台有三个关键功能: 发布和订阅记录流,类 ...
- 痞子衡嵌入式:串口调试工具Jays-PyCOM诞生记(4)- 联合调试(vspd, sscom, PyCharm2018.2)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是串口调试工具Jays-PyCOM诞生之联合调试. 软件开发离不开调试,调试手段分两种:一是黑盒调试,即直接从输入/输出角度测试软件功能是 ...
- Spring Cloud Alibaba基础教程:Nacos配置的加载规则详解
前情回顾: <Spring Cloud Alibaba基础教程:使用Nacos实现服务注册与发现> <Spring Cloud Alibaba基础教程:支持的几种服务消费方式(Res ...
- 易被忽略的Python内置类型
Python中的内置类型是我们开发中最常见的,很多人都能熟练的使用它们. 然而有一些内置类型确实不那么常见的,或者说往往会被我们忽略,所以这次的主题就是带领大家重新认识这些"不同寻常&quo ...
- 如何将html特殊字符编码转换成特殊字符_html十进制编码字符转回来
备注:有时候我们会莫名其妙遇到一些特殊字符: 这些字符在网页上能正常显示,但是在APP特殊情景并不识别这些字符: 如:' 这个其实是单引号: ' 百度后发现,它其实是HTML特殊 ...