前端VUE项目-day1

1、跨域

列子:1、我在同一台电脑上启动vue项目,地址http://localhost:1025/,后端启动flask项目,地址:http://localhost:5000,端口不一样,所以全端发起请求的时候受到同源策略的限制

直接在地址栏输入URL是浏览器发起的简单请求,不受同源策略限制。而通过JavaScript发起的XMLHttpRequest或Fetch API请求则会受到同源策略的限制

同源判定:协议(http/https)、域名(或IP)和端口三者完全相同才视为同源,只要有其中一个不同即跨域

解决:1、后端处理

2、前端处理,在vue.config.js中

html 复制代码
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:5000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

然后前端:

复制代码
axios.get('/api/home/getWebInfo')

这样写,当前端直接发起请求的时候会自动带上地址,实际请求为http://localhost:1025/api/home/getWebInfo,由于前端配置文件配置过代理,所以,包含/api部分被替换成target里面的内容,实际最终发出去的请求为http://localhost:5000/home/getWebInfo

2、vue2中使用el-image组件,为什么设置src="/src/assets/image/sara_home_bg.webp"加载不出图片,确定的是图片路径没问题

1. Webpack 静态资源处理问题

Vue CLI 项目使用 Webpack 打包,/src/assets/ 中的资源会被 Webpack 处理。直接使用绝对路径 /src/... 是无效的,因为:

  • 开发阶段:文件路径可能被 Webpack 的 dev-server 代理。

  • 生产阶段:文件会被打包到 dist/ 目录,路径会变化。

使用

html 复制代码
<el-image :src="require('@/assets/image/sara_home_bg.webp')"></el-image>

2. 路径别名问题

Vue CLI 默认配置了 @ 作为 /src 的别名,建议使用别名确保路径正确:

html 复制代码
<el-image :src="require('@/assets/image/sara_home_bg.webp')"></el-image>

3. 图片未放入 public/ 目录

如果图片是纯静态资源(不经过 Webpack 处理),可以将其放在 public/ 目录,然后直接引用:

html 复制代码
<el-image src="/image/sara_home_bg.webp"></el-image>
  • 需要将图片文件放到 public/image/sara_home_bg.webp
相关推荐
绝无仅有6 分钟前
某教育大厂面试题解析:MySQL索引、Redis缓存、Dubbo负载均衡等
vue.js·后端·面试
sean17 分钟前
开发一个自己的 claude code
前端·后端·ai编程
用户214118326360222 分钟前
dify案例分享-用 Dify 一键生成教学动画 HTML!AI 助力,3 分钟搞定专业级课件
前端
chxii40 分钟前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库
没逛够1 小时前
Vue 自适应高度表格
javascript·vue.js·elementui
太过平凡的小蚂蚁2 小时前
Kotlin 协程中常见的异步返回与控制方式(速览)
开发语言·前端·kotlin
苹果醋33 小时前
JAVA面试汇总(二)多线程(五)
运维·vue.js·spring boot·nginx·课程设计
咖啡の猫3 小时前
Vue初始化脚手架
前端·javascript·vue.js
一 乐3 小时前
汽车销售|汽车推荐|基于SprinBoot+vue的新能源汽车个性化推荐系统(源码+数据库+文档)
java·数据库·vue.js·汽车·毕设·汽车个性化推荐
晨枫阳3 小时前
uniapp兼容问题处理总结
前端·vue.js·uni-app