前端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
相关推荐
brzhang22 分钟前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构
brzhang27 分钟前
一文说明白为什么现在 AI Agent 都把重点放在上下文工程(context engineering)上?
前端·后端·架构
reembarkation37 分钟前
自定义分页控件,只显示当前页码的前后N页
开发语言·前端·javascript
Roye_ack1 小时前
【项目实战 Day9】springboot + vue 苍穹外卖系统(用户端订单模块 + 商家端订单管理模块 完结)
java·vue.js·spring boot·后端·mybatis
gerrgwg1 小时前
React Hooks入门
前端·javascript·react.js
ObjectX前端实验室1 小时前
【react18原理探究实践】调度机制之注册任务
前端·react.js
汉字萌萌哒1 小时前
【 HTML基础知识】
前端·javascript·windows
ObjectX前端实验室2 小时前
【React 原理探究实践】root.render 干了啥?——深入 render 函数
前端·react.js
北城以北88883 小时前
Vue--Vue基础(二)
前端·javascript·vue.js
ObjectX前端实验室4 小时前
【react18原理探究实践】更新调度的完整流程
前端·react.js