去哪儿网项目中Vue中无法访问到static目录下的json文件

最新推荐文章于 2024-06-19 16:59:45 发布
原创 最新推荐文章于 2024-06-19 16:59:45 发布 · 2.5k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue前端

在去哪儿网项目中遇到使用AJAX访问JSON数据时出现404错误的问题，经过一天的尝试多种解决方案，最终通过调整项目的配置文件中的端口号解决了该问题。

在做去哪儿网项目做到要用ajax访问数据的时候，直接踩到坑,搞了一天尝试了各种方法

1.目录结构如下
目录结构
直接在浏览器地址栏输入如下内容就跳转回首页了，没办法直接访问到json的数据
在这里插入图片描述
Home下面按照教程写的
在这里插入图片描述
api是这样的
在这里插入图片描述
用api的时候是404

各种方法都尝试了还是访问不了，直接把json文件放在home.vue同级的目录去访问依然报404
在这里插入图片描述

最后修改了config 里的index.js,修改了端口号，问题得到了解决
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

使用Vue框架开发去哪儿旅游网移动端实战项目（六）
宋承佑
01-13 1844
第六章 旅游网站首页开发 首页导航栏 根据设计稿完成页面的布局： 在正式编写代码之前，先来介绍一下stylus 这是一种与less、sass一样的功能，可以帮助我们快速完成css代码的编写。请使用一下命令进行安装： npm install stylus --save npm install stylus-loader --save 开始编写header页面： <template>...
【vue】二、vue2仿去哪儿网app——首页开发
前端学习博客
02-22 788
文章目录二、vue2仿去哪儿网app——首页开发Ⅰ 页面结构Ⅱ 开发笔记及注意点1.公共样式抽取2.路径 --> 绝对路径3.用padding-bottom实现固定宽高比4.保证内容不超出父盒子5.axios 获取数据6.实现有分页效果的图标（icon）轮播区域Ⅲ bug解决1.vue-cli引入iconfont报错：2.vue-awsome-swiper修改轮播图pagination颜色问题3.1. vue轮播图插件 Vue-Awesome-Swiper3.2 npm发布包缺少.d.ts文件，VSC
vue-cli项目 build后请求本地static文件中的 json数据，路径不对，报错404处理方法...
weixin_33827731的博客
04-07 3967
vue-cli 项目 build 出错点： 　　1，build生成dist 放在tomcat上 报错，不显示内容 　　　　解决办法： config>index.js===>assetsPublicPath: '/', 修改为assetsPublicPath: './', 　　 　　note:如果css中图片不显示，打开“build/utils.js”，增加一行代码即可...
vue项目打包之后放在服务器上测试的时候访问不到本地json数据的解决方法
inticaler的博客
05-08 3292
上面的代码表示在本地开发项目时模拟后端数据。项目打包之后放在服务器上，json的路径需要按照原来的json实际路径放置才会访问到（/api/index.json）
vue本地运行项目获取static中文件找不到问题，更新不生效
最新发布
qq_35388369的博客
06-19 891
原因：由于运行配置了proxyTable代理 ‘/’，所有的网络请求都被代理，获取到静态文件实际上是代理服务器上的文件，所以本地修改static文件下的操作都不会生效。问题：vue本地运行项目，获取static静态文件夹中文件找不到，更新文件之后运行没有变化。解决办法：在全局代理’/'下，忽略掉static请求的代理。
慕课网Vue2.5去哪儿实战课程（3）
yangyang的专栏
02-21 1409
6.Vue 项目预热 本章首先讲解项目环境的基础配置，在此基础上分析工程代码目录结构，延展讲解 Vue中单文件组件及单页面应用路由的概念，最后将带大家整理项目目录，完成 stylus、reset.css 等基础工具及样式的引入，完成项目开发前的准备工作。 6.1Vue项目预热 - 环境配置 git还要学习，git和github联合使用。 6.2Vue项目预热 - 项目代码介绍 .editorcon...
Vue项目开发目录结构和引用调用关系
xieyuleisss的博客
08-29 529
本文精华总结：在项目运行中，main.js作为项目的入口文件，运行中，找到其实例需要挂载的位置，即index.html中，刚开始，index.html的挂载点处的内容会被显示，但是随后就被实例中的组件中的模板中的内容所取代，所以我们会看到有那么一瞬间会显示出index.html中正文的内容，而index.html中的Title部分不会被取代，所以会一直保留。 下图为Vue项目文件夹： 以下就项目文件夹中的各文件的作用进行介绍： ├── build/ # Webpack 配置目录
去哪儿项目总结
a_18338878525的博客
06-07 508
Vue项目： 基础 webapp首页模块 城市列表页 列表页-》详情页 公共图片 css部分 stylus（scss less）环境准备1： https://piao.qunar.com/touch 参考网站是多页应用MPA 但我们用vue写SPAwebapp SPA 仿写 去哪儿1：移动端项目开发环境准备： 安装nodejs 验证 node -v npm -v 注册码云 https://gitee.com/ 代码版本管理 国内 快速 简单
vue中无法访问静态资源
qq_45555170的博客
12-18 3946
vue中无法访问静态资源原因：解决看看效果 原因： 主要是项目的图片没有放到正确的路径之下，就基本上会出现vue访问不到静态静态资源的问题 解决 将所需要的图片放到static中就可以了，在读取对象的属性的时候只需要把照片的路径写准确即可，可以直接写路径访问到 在 static/img/ 后面直接加图片名称.这样项目中就能访问到了 大致就是一个这样的路径 看看效果 这样就能访问vue项目中的静态资源了 ...
vue部署项目之后，无法访问到静态资源（图片）
简的博客
06-29 1万+
首先参见如下帖子：https://blog.csdn.net/qq_39480597/article/details/79568173， 这个算是系统的管理了静态资源资源问题，适合大部分静态资源访问不到的情况，但是觉得很繁琐，我这边没有用，我下面列出一种，只有一两张图片访问不到的情况 我这边是访问图片出现了问题，而且只有一张，是通过new 出来的image对象，原始代码如下 // js操作dom，...
解决访问static目录下文件找不到的问题（ 报404 ？）
sslcsq的博客
12-25 7183
在我们创建一个vue项目时，访问static静态资源目录下的文件时 报404 文件找不到 如何解决？ 此时我们打开终端 全局卸载cli 全局卸载：npm uninstall vue-cli -g 然后在中心下载 cli 全局安装：npm install vue-cli -g 然后在 /static/img/×××.jpg 就可以直接访问到了 vue默认情况下static目录的文件是直接可以...
vue项目的业务页面中访问static静态资源，点击下载时报未发现文件
Kratial的博客
04-21 2335
【代码】vue项目的业务页面中访问static静态资源，点击下载时报未发现文件。
vue 直接访问静态图片_vue本地静态图片的路径问题解决方案
weixin_39849930的博客
12-20 1075
不少人在vue的开发中遇到这样一个问题： img的src属性绑定url变量，然而图片加载失败。大部分的情况中，是开发者使用了错误的写法，例如： 这样写肯定是不对的，正确的写法应该使用v-bind: 不过，有时候即使使用了正确的语法，依旧无法显示图片，因为你的imgUrl使用了本地图片的路径。现在，我们要在App.vue里使用位于src/assets/目录下的logo.png图片，于是，我们设：im...
vue.config.js 全局配置
热门推荐
轻风细雨_林木木
03-20 3万+
1.Webpack配置实例 参考：https://cli.vuejs.org/zh/config/ vue.config.js vue.config.js 是一个可选的配置文件，如果项目中存在这个文件，那么它会被 @vue/cli-service 自动加载，你也可以使用 package.json 中的 vue 字段配置，但是package.json中需要严格遵照 JSON 的格式来写。 文件初始值： /** * @type {import('@vue/cli-service').ProjectOpti
Vue--解决build静态资源后无法直接访问问题
随便写写
07-08 6673
问题原因，打包之后访问路径错误，index.html打开是空白， F12报错找不到引用文件，一看引用在了根目录（文件所在盘，如：C盘、E盘） 解决 步骤1，修改使用路由方式 将路由从history换成hash const router = new VueRouter({ mode: "hash", base: process.env.BASE_URL, routes }); 步骤2，修改使用配置文件 // vue.config.js module.exports = { // 解决
vue修改静态文件访问位置
qq_18246731的博客
10-18 1947
在config文件夹中的index.js中的assetsPublicPath: '/'，改为assetsPublicPath: '/chatbots/'使其在访问chatbots下访问静态资源
vue 直接访问静态图片_vue中显示静态图片怎么引用
weixin_39602108的博客
12-20 1227
Windows 7 性能优化1."计算机" 2.右键>"属性" 3."高级系统设置">"高级" 4."性能"> ...spring与MyBatis结合下面将介绍使用spring+mybatis的开发样例: 首先,笔者创建的是一个maven工程,在开发先先导入相关的依赖jar: pom.xml: &lbrack;HDU3247&rsqb;Resource Arch...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值