点击时获取事件对象

<template>
	<button @click="test(1,2,$event)">按钮</button>
</template>
<script lang="ts" setup>
function test(a:number,b:number,c:Event){
	//获取事件对象
	console.log(c)
}
</script>

跨域参数配置

跨域相关参数

withCredentials：是否允许带cookie，true时服务端需要设置SupportsCredentials=true

import axios from 'axios'
import router from './../router'
import comm from './comm'

//axios.defaults.baseURL='/api'; 
const myAxios = axios.create({
  // 只要发送axios请求，就在请求前加入/api的开头，例如 /zzz/one -> /api/zzz/one
  baseURL: '/api',
  // 设置超时时间 5s
  timeout: 10000,
  responseType: 'json',
  // 是否允许带cookie,true时服务端需要设置SupportsCredentials
  withCredentials: false,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
  }
})

// POST传参序列化(添加请求拦截器)
myAxios.interceptors.request.use(
  config => {
    // 在发送请求之前做某件事
    if (config.method === 'post' || config.method === 'put' || config.method === 'delete') {
      // 序列化
      const data = new FormData()
      Object.keys(config.data).forEach(item => {
        data.append(item, config.data[item])
      })
      config.data = data
    }
    if (localStorage.getItem('token')) {
      config.headers.Authorization = localStorage.token
    }
    console.log(config.data)
    return config
  },
  error => {
    comm.toast(error.data.message)
    return Promise.reject(error.data.message)
  }
)

// 返回状态判断(添加响应拦截器)
myAxios.interceptors.response.use(
  res => {
    // 对响应数据做些事
    if (res.data && res.data.code !== 1) {
      comm.toast(res.data.msg)
      return Promise.reject(res.data.msg)
    }
    return res.data
  },
  error => {
    // 若是发现有鉴权的基础信息
    if (localStorage.getItem('loginUserBaseInfo')) {
      // 并且当前的时间大于服务器过期的时间
	  const loginUserBaseInfo = window.localStorage.getItem('loginUserBaseInfo')
      const lifeTime = JSON.parse(loginUserBaseInfo).lifeTime * 1000
      const nowTime = new Date().getTime()
      if (nowTime > lifeTime) {
        localStorage.removeItem('loginUserBaseInfo')
        comm.toast('登录状态信息过期,请重新登录')
        router.push({
          path: '/login'
        })
      }
    } else {
      console.log(error)
      // 服务器状态码不是200的情况,这些自定义
      comm.toast(error.response.data.Message)
    }
    return Promise.reject(error.response)
  }
)

export default myAxios

devServer: {
	proxy: {
	   // 二级目录的一定要写在前面
	  '/api/wfs': {
		target: 'http://localhost:8000',
		changeOrigin: true,
		pathRewrite: {
			'^/dev-api/wfs': ''
		},
		logLevel: 'debug', // 可在控制台打印真实地址
	  },
	  '/api': {
		disableHostCheck:true, // 当设置为true时，此选项将绕过主机检查

		// 默认情况下是/，所以您可以作为http://localhost:8080使用
		// 更改为 /assets/ 就变为 http://localhost:8080/assets
		publicPath: '/assets/', 
		target: 'http://expo.sdxsk.com/api', //请求接口域名
		ws: true,
		secure: false,
		// 是否允许跨域
		changOrigin: true,
		// 如果配置了axios的baseURL为'/api',在这里需要用空字符串代替
		pathRewrite: {
		  '^/api': ''
		}
	  }
	}
}


// 这个是对所有的接口都代理的，不止是检测到 /api 的接口
// 当请求了前端不存在的资源时，那么该请求会转发给服务器(优先匹配前端资源)
devServer: {
 proxy: 'http://e.dxy.net'
}

在Vue项目中配置了代理，但是部署之后不生效，并且报404

这是因为Vue配置的代理仅在本地开发下有效，部署之后，需要：

• 在nginx中进行配置代理
• 或者后端配置跨域

vue2相关设置

devServer: {
	host: '0.0.0.0',
	port: port,
	open: true,
	proxy: {
	  [process.env.VUE_APP_BASE_API]: {
		target: `http://128.169.21.56:8081`,
		changeOrigin: true,
		pathRewrite: {
		  ['^' + process.env.VUE_APP_BASE_API]: ''
		}
	  }
	},
	disableHostCheck: true
}

vue3相关设置

server: {
  host: "localhost",
  port: 3002,
  proxy: {
	// "/api/":
	[ENV.VITE_API_URL]: {
	  target: "http://125.125.35.24:8088",
	  changeOrigin: true,
	  // rewrite: (path) => path.replace(/^\/api/, "")
	  rewrite: (p) => p.replace(RegExp(`^${ENV.VITE_API_URL}`), "")
	}
  }
}

监听元素变化

noMounted(() => {
  // 创建一个观察器实例并传入回调函数
  domOberver = new MutationObserver((mList, ob) => {
	  autoNiceHeight()
  })
  // 观察器的配置（需要观察什么变动）
  const config = { 
	  attributes: true, 
	  childList: true, 
	  subtree: true
  }
  // 配置开始观察的目标节点
  domObserver.observe(dialogRef.value, config)
})
onUnmounted(() => {
	// 停止观察
	domObserver.disconnect()
})
 
function autoNiceHeight(){
	const isExceed = warpperEle.offsetHeight < 
	                 dialogRef.value.offsetHeight  + dialogRef.value.offsetTop
	if(isExceed){
		const niceHeight = warpperEle.offsetHeight - dialogRef.value.offsetTop
		dialogRef.value.style.height = autoUnit(niceHeight)
	}
}