vue3 404页面得变化

vue3 404页面得变化

• 注意： 需写在路由最后！

{
    path: '/:pathMatch(.*)'
}

Vue3跨域代理配置

• 前端解决

1. `vite.config.js`
server: { 
    port:4000,//设置服务启动端口号，是一个可选项，不要设置为本机的端口号，可能会发生冲突
     open:true,//是否自动打开浏览器，可选项
     cors:true,//允许跨域。
     // 设置代理
     proxy: {
      // 将请求代理到另一个服务器
         '/api': {
         target: 'http://192.168.11.11:8006',//这是你要跨域请求的地址前缀        
         changeOrigin: true,//开启跨域
         rewrite: path => path.replace(/^\/api/, ''),//去除前缀api  
    } 
  } 
 }
 
2.
axios.defaults.baseURL =    import.meta.env.VITE_BASE_API? '/' : "/api"

• 前端解决

指定了以后只要遇到访问服务器路径/api 默认进入代理服务器
const axios = axios.create({
    baseURL:"/api",
    timeout:5000
})

`vite.config.js`
server: { 
     port:4000,
     open:true,
     cors:true,
     proxy: {
         '/api': {
         target: 'http://192.168.11.11:8006', 
         changeOrigin: true,
         rewrite: path => path.replace(/^\/api/, ''),
         // rewrite: path => path.replace(new RegExp("^"+"/api"),""),
    } 
  } 

• 后端解决叫CORS

后端配置好之后，前端发送请求，默认发送两次
第一次请求：options尝试将请求发送后端验证是否可以访问，服务器配置跨域，通过响应头告诉浏览器允许跨域
第二次请求：再次将要获取接口请求，发送后端 允许访问 拿到结果

• 跨域因 协议 域名 端口不同所产生，是浏览器为了安全

一、带响应式Props解构赋值

• Vue3.5版之props无需toref响应式

<template>
  <div>
    {{ testCount }}--{{ props.testCount}}
  </div>
</template>

<script setup>
  import { defineProps } from 'vue';
  const { testCount } = defineProps({
    testCount: {
      type: Number,
    },
  });
  
  const props = defineProps({
    testCount: {
      type: Number,
    },
  });
</script>

• Vue3.5版之props自带响应式

<template>
  <div>
    {{ testCount }}
  </div>
</template>

<script setup>
  import { defineProps } from 'vue';
  // 直接添加默认值
  const { testCount = 0 } = defineProps({
    testCount: {
      type: Number,
    },
  });
</script>