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爬虫入门教程 9-100 河北阳光理政投诉板块
河北阳光理政投诉板块-写在前面 之前几篇文章都是在写图片相关的爬虫,今天写个留言板爬出,为另一套数据分析案例的教程做做准备,作为一个河北人,遵纪守法,有事投诉是必备的技能,那么咱看看我们大河北人都因为 ...
- Android--SurfaceView播放视频
前言 本篇博客讲解一下如何在Android下,使用SurfaceView播放一个视频流媒体.之前有讲到如何使用MediaPlayer播放音频流媒体,其实MediaPlayer还可以播放视频,只需需要S ...
- AngularJS2+调用原有的js脚本(AngularJS脚本跟本地原有脚本之间的关系)
昨天一个话题说关于AngularJS2以后版本的两个小技巧,不料引出了另外一个话题,话题起始很简单: "很多的前端框架并不复杂,比如JQuery,引入即用,实时看到效果,多好.到了Angul ...
- 【ASP.NET Core快速入门】(十一)应用Jwtbearer Authentication、生成jwt token
准备工作 用VSCode新建webapi项目JwtAuthSample,并打开所在文件夹项目 dotnet new webapi --name JwtAuthSample 编辑JwtAuthSampl ...
- C++STL模板库序列容器之List容器
目录 一丶List容器的存储结构 二丶丶STL中list容器的使用. 一丶List容器的存储结构 list容器底层是链表结构来维护的.跟vector不一样. vector是数组维护的.拥有连续内存.所 ...
- 谈谈iOS获取调用链
本文由云+社区发表 iOS开发过程中难免会遇到卡顿等性能问题或者死锁之类的问题,此时如果有调用堆栈将对解决问题很有帮助.那么在应用中如何来实时获取函数的调用堆栈呢?本文参考了网上的一些博文,讲述了使用 ...
- 好用的开源库(一)——MaterialEditText
GIthub地址:https://github.com/rengwuxian/MaterialEditText#features 使用文档: 在android新推出的Material Design中对 ...
- 此博客停更,转至lustforlife.cn
新博客地址:lustforlife.cn
- 前端面试:谈谈 JS 垃圾回收机制
摘要: 不是每个人都回答的出来... 最近看到一些面试的回顾,不少有被面试官问到谈谈JS 垃圾回收机制,说实话,面试官会问这个问题,说明他最近看到一些关于 JS 垃圾回收机制的相关的文章,为了 B 格 ...
- Dynamics 365-如何指定邮件收件人的地址
如果CRM Entity勾选了Sending Email,那么这个Entity的Records是可以直接作为Email的收件人使用的,而邮件地址是Entity的Primary Email字段. 在我们 ...