前端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中

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/ 目录，路径会变化。

使用

<el-image :src="require('@/assets/image/sara_home_bg.webp')"></el-image>

2. 路径别名问题

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

<el-image :src="require('@/assets/image/sara_home_bg.webp')"></el-image>

3. 图片未放入 public/ 目录

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

<el-image src="/image/sara_home_bg.webp"></el-image>

• 需要将图片文件放到 public/image/sara_home_bg.webp。