vue高频面试题(2023),有回答思路,并且让你回答清晰

一、对MVC,MVP,MVVM的理解

三者都是项目的架构模式(不是类的设计模式),即:一个项目的结构,如何分层,不同层负责不同的职责。

1、MVC:

MVC的出现是用在后端(全栈时代)

M:model,模型:

主要完成业务功能,在数据库相关的项目中,数据库的增删改查属于模型(重点)。没有页面,是纯粹的逻辑

V:view,视图:

主要负责数据的显示(HTML+CSS,动态网页(jsp,含有html的php文件))页面的展示和用户的交互。

C:controller,控制器:

主要负责每个业务的核心流程,在项目中体现在路由以及中间件上(nodeJS中的routes文件夹)

2、MVP

MVP是把MVC中的C改成了P。主要限制了M和V之间不能直接通信(互相调用,传递数据)。M和V之间的通信必须经过P。

P:Presenter,表示器

主要用于连接M层、V层,完成Model层与View层的交互,还可以进行业务逻辑的处理。

3、MVVM:

MVVM是把MVP中P改成了VM。主要体现的是M和V之间的双向绑定。View的变动可以同步响应在Model,反之亦然。Vue就是一个MVVM的框架。准确来说,使用Vue框架完成项目时,使用的是MVVM模式。

VM:ViewModel

主要完成M和V的数据通信,并且是双向绑定。而 View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作 DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

总结:所有MV*的项目的架构模式:都是为了完成项目代码的职责分工。

二、v-if和v-show区别

相同点:

都是用来控制dom元素的显示和隐藏。

不同点:

1、原理上:

v-if是 通过 添加和删除dom元素,来 控制dom元素的显示和隐藏。

v-show是 通过 控制dom元素样式的display属性的值,来 控制dom元素的显示和隐藏。

2、性能损耗

v-if:性能损耗主要体现在频繁切换时

v-show:性能损耗主要体现在首次。

3、应用场景:

v-if:用于切换不频繁的场景。

v-show:用户切换频繁的场景。

4、安全性:

v-if:安全性好。(如果dom元素不显示时,在elements里根本看不到)

v-show:安全性不好。(如果dom元素不显示时,在elements里依然可以看到,那么,懂程序 的人,即可以修改)

三、computed和watch的区别

1、相同点:

都可以监听数据。

2、不同的:

1)、概念:

computed: 是计算属性,依赖其它属性值,并且 computed 的值有缓存,当依赖的属性值发生改变时,才会重新计算 computed 的值,默认是只读的(相当于getter函数),它也可以设置getter和setter函数来完成读和写。

watch:监听器,更多的是观察的作用,每当监听的数据变化时都会执行回调进行后续操作,它只能设置getter。watch默认只监听一层。如果要深度监听,让deep属性为true。

2)、作用:

computed:是为了显示而用,降低了模板上代码复杂度。

watch:属性变化的检测(相当于事件),当属性的值发生变化时,可以调用函数。主要处理异步以及开销比较大的操作。简单粗暴的理解:一个函数的执行时机时机

3)、依赖模板调用:

computed:只能在模板上使用。

watch:不能在模板上使用。

4)、是否异步:

computed:不能有异步,只能同步。

watch:可以有异步。

5)、立即执行:

computed:是立即执行。

watch:默认不是立即执行。如果要立即执行,增加属性:immediate。

补充一个 写代码的规范:

1、以后代码时,把函数定义和调用时机分开。

四、vue2的响应式原理

响应式:当js中的数据发生变化时,模板上会对应的发生变化。

1、数据劫持:

目的:当时数据发生变化时,vue框架能够感知到(劫持到)

怎么做的:利用ES5的Object.defineProperty()。当实例化组件时,vue框架内部会把定义在组件里data的所有数据(属性),进行遍历,给每个数据(属性)增加setter和getter函数【同时会做订阅】。当数据发生变化时,会调用setter函数。当获取数据时,会调用getter函数。

2、发布订阅者模式:

目的:当数据发生变化(其实就是调用setter函数)时,会发布给所有订阅者。

怎么做的:当vue组件实例化时,vue框架内部会扫描(阅读)模板,让模板上使用vue语法(指令,{{}}等)的dom元素去订阅对应的数据的变化。然后,当数据发生变化时【调用setter】,会更新所有订阅该数据的模板。

五、Vue3的响应式原理:

1、数据劫持:用Proxy替换了 Object.defineProperty。Proxy不需要循环,速度比Object.defineProperty快10倍。同时也解决了数组(vue2中用下标的方式改变数组不是响应式的)

2、发布订阅模式:

内部有个Track函数:相当于订阅。

内部有个Trigger函数:相当于发布。

六、双向绑定的原理

1、双向绑定:视图层变化时,模型层会变化。模型层变化时,视图层会变化。

2、原理: 1)、通过事件和属性完成。

事件完成的:视图层影响模型层

属性完成的是:模型层影响视图层(背后就是响应式原理)

3、vue针对官方标签使用v-model指令,v-model指令针对不同的官方标签使用不同事件和属性。

1)、针对文本框(单行和多行):value属性和input事件。 如果加上修饰符 lazy。事件变成了change事件。

2)、针对radio:使用的checked属性和change事件。同时,需要给radio加上value属性。

3)、针对checkbox:使用的checked属性和change事件。

3.1)、如果应用在多选时,需要给checkbox加上value属性。

3.3)、如果应用在单选时,不需要加。

4)、针对select:使用value属性和change事件。

七、单向数据流

1、单向数据流是什么:

单向数据流是指父组件可以修改子组件的数据,反之不行(子组件不能修改父组件的数据)。

2、vue框架的单向数据流:

vue框架的props是单向数据流。即:父组件可以修改子组件的props。子组件不能通过修改props的方式来修改父组件的数据(data),否则:

1)、造成数据混乱:如:一个父级组件的数据传递给多个子组件,某个子组件如果通过props修改的父级组件的数据,父级组件再修改其它子组件,其它子组件就会莫名其妙的被修改,造成数据混乱

2)、框架会给程序员报出一个警告(特指:父组件给子组件传递的props来自于父组件的数据)。

3、当父级的数据更新时,子组件的props也会随之更新。

八、keep-alive

keep-alive是vue提供的组件。

它有三个特性:

1)、组件作用:keep-alive 可以缓存组件及其状态(数据),避免了组件的频繁创建和销毁所带来的性能损耗。,一般结合路由和动态组件一起使用。

2)、组件属性:提供 include 和 exclude 属性。include 表示只有名称匹配的组件会被缓存,exclude 表示任何名称匹配的组件都不会被缓存 ,其中 exclude 的优先级比 include 高。两者都支持字符串或正则表达式

  这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式,或是包含这两种类型的一个数组:
  它会根据组件的 name 选项进行匹配,所以组件如果想要条件性地被 KeepAlive 缓存,就必须显式声明一个 name 选项。
  
  //以下代码:表示缓存组件:MyFooter和MySearch
  <keep-alive include="MyFooter,MySearch" >
      <component :is="" />
  </keep-alive>

3)、keep-alive会触发两个钩子函数: activated 和 deactivated 。当组件被激活时,触发钩子函数 activated,当组件被移除时,触发钩子函数 deactivated。

九、SPA的理解:

1)、单页面应用的概念

SPA:single page application,单页面应用。

就是整个项目就只有一个html页面(文件),首次加载时,把所有的html,css,js全部加载下来。通过操作dom的删除和创建(添加)来完成页面的切换。

2)、单页面应用优缺点

优点:

1、单页应用相对服务器压力小。【因为:首次、或者只要HTML,CSS和JS加载完毕后,切换页面是不用再去服务器请求HTML,CSS和JS,而是直接操作DOM】

2、局部刷新,所以,用户体验好。【通过删除、添加、修改DOM的方式】 ​ 3、前后端分离 ​ 4、页面效果会比较炫酷(比如切换页面内容时的转场动画)

缺点:

1、不利于 SEO(Search Engine Optimization)。如:百度,360等搜索引擎收录。 ​ 2、初次加载时耗时多(可以使用路由懒加载解决) ​ 3、导航不可用,如果一定要导航需要自行实现前进、后退(vue-router做好了)。页面复杂度提高很多

4、容易造成CSS命名冲突。【用scoped或者BEM的方式解决】

十、请问你怎么理解虚拟DOM和diff算法

1、什么是虚拟dom和diff算法:

虚拟DOM: 用JS对象模拟的真实DOM,该js对象包含了真实DOM的所有属性和内容,

diff算法:用来比较两个虚拟DOM的不同之处,并在旧的虚拟dom树上打上标记。

2、虚拟DOM和diff算法的作用:

虚拟DOM和diff算法结合起来,用来提升性能。可以减少无效的DOM渲染,即:减少了无效的重排和重绘。

3、步骤(思路,流程)

1)、产生两个虚拟DOM树:newVDom,oldVDom。

2)、oldVDom和真实DOM保持一致

3)、数据变化时,影响的是(操作的是)newVDom

4)、操作newVDom后,通过diff算法对比newVDom和oldVDom的差异,并在oldVDom标注哪些节点要删除,哪些节点要增加,修改

5)、根据oldVDom(上的标记)操作真实的DOM,让真实Dom和oldVDom保持一致

4、diff算法的解释:

逐步解析newVdom的节点,找到它在oldVdom中的位置,

1)、如果找到了,则对比两个节点。

1.1)、两个节点内容不相同,那就打上修改标记,然后移动到下一个DOM元素。

1.2)、两个节点内容相同,直接移动到下一个的DOM元素,

2)、如果没找到,说明是新增节点,则新建一个节点插入到oldVDom。

3)、遍历完成之后如果oldVdom中还 没处理过的节点,则说明这些节点在newVdom中被删除了,打上删除标记。

十一、你对 Vue 项目进行哪些优化?

第一个方面:代码层面的优化 v-if 和 v-show 区分使用场景 computed 和 watch 区分使用场景 v-for 遍历必须为 item 添加 key,且避免同时使用 v-if 长列表性能优化 事件的销毁 图片资源懒加载 路由懒加载 第三方插件的按需引入 优化无限列表性能 服务端渲染 SSR or 预渲染 第二个方面:Webpack 层面的优化 Webpack 对图片进行压缩 减少 ES6 转为 ES5 的冗余代码 提取公共代码 模板预编译 提取组件的 CSS 优化 SourceMap 构建结果输出分析 Vue 项目的编译优化 第三个方面:基础的 Web 技术的优化 开启 gzip 压缩 浏览器缓存 CDN 的使用 使用 Chrome Performance 查找性能瓶颈

十二、vue中的v-for为什么要使用key

1、key的作用

1)、vue中使用了虚拟dom和diff算法,在使用diff算法进行对比两个虚拟dom树时,是通过标签名和key来标识一个元素的,这样才能区分(识别)不同的元素,提高对比的效率。所以,并不是说只是在v-for中使用key,是任何时候,如果希望唯一标识一个元素,那么,都可以使用key。

2)、vue在做过渡效果时(<transtion></transtion>),如果两个切换的元素标签一样,而么有使用可以,那么,vue会认为是同一个元素,而不会出现切换效果。

2、为什么要使用key

1)、如果没有key,vue只能用标签名区分不同的DOM元素,如果两个DOM元素的位置进行了交换时,vue只会交互内容,而不会交换两个DOM元素。如下示例代码,仔细品读:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <input type="button" value="2、再点击:交换两本书" v-on:click="changeBook">
        <h2>书籍列表:</h2>
        <ul>
            <li v-for="book in bookObjs" >
               书名:{{book.name}}
            </li>
        </ul>
        <input type="button" value="1、先点击:添加自定义属性" v-on:click="addIndex">
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
​
<script>
​
let vm = new Vue({
    el:"#box",
    data:{
        bookObjs:[
            {
                id:"01001",
                name:"三国演义",
                author:"罗贯中"
            },
            {
                id:"01002",
                name:"红楼梦",
                author:"曹雪芹"
            },
            {
                id:"01003",
                name:"西游记",
                author:"吴承恩"
            }
        ]
    },
    methods:{
        changeBook(){
            //下面这段代码交换数组中第一个元素和最后一个元素。
            // 1、如果希望把数组中元素对应的dom元素也进行交换,就必须给dom元素加上key。
            // 2、如果不吸烟交互两个dom元素,就不用加可以。
            let firstBook = this.bookObjs.shift();
            let endBook = this.bookObjs.pop();
            this.bookObjs.unshift(endBook);
            this.bookObjs.push(firstBook);
​
        },
        addIndex(){
            let liDoms = document.getElementsByTagName("li");
            for(let i=0;i<liDoms.length;i++){
                liDoms[i].setAttribute("index",i);
            }
            liDoms[0].style.cssText=`background-color:red`;
            liDoms[2].style.cssText=`background-color:blue`;
        }
    }
})
​
</script>

十三、组件的data为什么是个函数

简单回答:如果不是函数,那么,复用的组件的data共享同一块内存空间。

具体解释:组件的data必须是函数,而且要有返回object(就是vue2对象的data)。当组件复用时,会自动调用该函数,这样的话返回的新对象就是新开辟的空间。这样就保证了每个组件的data是独立的空间。而不会互相影响。即:组件的作用域(应该)是独立的。

十四、组件间通信:

1)、父子组件传值:

1)、父---子传:props,ref。vuex,pinia,provide 和 inject

……………………要说详细

2)、子-->父传:emit,vuex,pinia

……………………要说详细

2)、兄弟组件:

1)、子1---》父---》子2

2)、事件总线(event-bus)

原理:使用vue对象的$on和$emit完成。

具体做法:假设SonA给SonB传递数据。新建一个空的vue对象。在SonA里和SonB引入该vue对象。。

$emit:触发事件(在SonA)

$on:绑定事件(在SonB)

3)、vuex,pinia

3)、跨级:

provide 和 inject

vuex,pinia

十五、路由传参

1、vue-router有两种传参方式:params和query。

2、params

首先,需要在路由配置中使用动态路由匹配 {path: "/路径/:参数名",name:"路由名"}

1)、传【跳转时传】

//声明式:
1)、字符串写法
 <router-link to="/路径/参数的值"></router-link>
2)、对象写法
 <router-link :to="{name:路由名,params:{参数名:参数值}}"></router-link>
​
//编程式:
​
同上。

2)、接【路由的组件内部接收】

this.$route.params.参数名

3、query

1)、传

//声明式
//1)、字符串写法:
<router-link to="路径?参数名1=参数值1&参数名2=参数值2"></router-link>
//2)、对象写法:
<router-link :to="{path:路径,query:{参数名1:参数值1,参数名2:参数值2}}"></router-link>
​
//编程式:
​
同上。
​

2)、接

this.$route.query.参数名

4、使用场景:

1)、params:多用于传递单个参数

2)、query:在传递多个参数时,建议使用query。

十六、$router和$route的区别

1)、$router是vue-router对象,是创建的vue-router对象,该对象具有路由相关api,如:push(),replace,go(),back(),forward。

2)、$route 是 匹配到的路由对象。当地址栏的路径发生变化时,会匹配某个路由配置。然后,vue-router对象就会在组件上去产生一个$route对象,来保存匹配到的路由的相关信息,包括:传递的参数,路由元信息等(如:path,params,query等等)

十七、vue两种路由模式的区别

1、外观上的区别:

1)、hash有#

2)、history没有#

2、原理上的区别:

1)、hash用的是锚点连接。背后使用location.href和window.hashchange事件。锚点连接自带历史记录。

2)、history背后用的是 history.pushState 来记录页面的历史记录。

3、跟后端有关的区别:

1)、hash和后端没有关系。

2)、history和后端有关系。当地址栏发生变化后,浏览器默认会发送请求给服务器(服务器上的资源:html,css,js,api接口,后端渲染的页面,等等),所以,当前后端不分离时:需要保证前端路径和后端的api或者后端渲染的页面不要重名。另外,前后端分离,前端服务器需要配置一个 针对404页面时,返回index.html。

十八、vue3选项式的生命周期

1、vue组件(实例)的生命周期是:

一个vue组件(实例)从创建,挂载,更新,销毁的整个过程。

2、vue组件(实例)的生命周期有:

四个阶段和八个钩子函数:

1)、创建阶段(数据挂载阶段):做响应式的处理和依赖注入,具体而言:是把data配置项的所有数据挂载到vue组件(实例)上,并做响应式。

在这个阶段的前后会分别调用:beforeCreate和created。

beforeCreate钩子函数里,不能通过vue组件(实例)拿到数据

created钩子函数里,vue组件(实例)上可以拿到数据

2)、模板渲染阶段:把数据渲染到模板上。

在这个阶段的前后会分别调用:beforeMount和mounted。

beforeMount钩子函数里,模板还没有渲染(模板上的内容还是就是程序员写的代码)

mounted钩子函数里,模板已经渲染(模板上的内容就是用户看到的)

3)、模板更新阶段(组件更新):当数据发生变化时,把新的数据渲染到模板上。

在这个阶段的前后会分别调用:beforeUpdate和updated。

beforeUpdate钩子函数里,数据是新的,模板是旧的

updated钩子函数里,模板是新的(模板已经被更新了)

4)、组件销毁阶段:卸载 组件里的watch、子组件、事件监听

强调:组件销毁阶段并不是把vue组件(实例)从内存中释放。

在这个阶段的前后会分别调用:beforeDestory(Vue3是beforeUnmount)和destoryed(vue3是unMounted)。

3、生命周期的使用场景:

1)、created:初始化数据、发送请求等操作在created里调用。

2)、mounted:也是可以发送请求的,如果有些初始化操作需要使用dom,那么,必须放在此处。

3)、beforeDestroy(beforeUnmount):清除定时器,清除事件总线等全局性的数据。

补充:

如果使用了keep-alive包裹组件,那么会经历两个钩子函数:activated,deactivated。组件就不会销毁了。既就是不会调用beforeUnmount和unMounted。

十九、父子组件生命周期钩子函数的调用顺序。

1、初始阶段:

父beforeCreate----》父created---》父beforeMount----》子beforeCreate---》子created--》子beforeMount--》子mounted --》父mounted。

2、更新阶段:

当父组件 数据传递给子组件了,当父组件的数据更新时,子组件也就会更新。

父beforeUpdate---->子beforeUpdate--->子的updated--->父的updated

3、销毁阶段:

父beforeUnmount---->子beforeUnmount--->子的unMounted--->父的unMounted

二十、事件总线的使用(兄弟组件传值)

二十一、路由守卫

1、什么是路由守卫

控制组件的跳转,对是否能够进入某个路径对应组件做限制。根据业务逻辑来判定是否可以进入某个组件。

什么时候使用路由守卫:

当进入某个路径,会有限制时。就需要使用路由守卫。

当进入路径时,需要完成通用的业务,也可以使用路由守卫,特别是全局路由守卫

2、路由守卫有哪些分类

1)、全局守卫

1)、前置钩子:beforeEach,当地址栏的路径发生变化时,会先调用该钩子函数,再进行进行路由匹配(路由匹配之前调用)。

2)、后置钩子:afterEach,当路由匹配成功后,先调用该函数,然后才创建组件(路由匹配成功之后)。

2)、路由独享守卫

1)、只有前置:beforeEnter:当匹配到某个指定的路由后,会先调用该函数,然后再创建组件。

3)、组件内部守卫

1)、前置:beforeRouteEnter:当路由匹配成功后,进入组件前,先调用该函数。

2)、路径更新,组件复用:beforeRouteUpdate: 当地址栏路径发生变化,但是进入的组件和上一个组件是同样的情况下,会调用先该函数。如:

3)、离开:beforeRouteLeave:当通过路由的方式离开某个组件前,会调用该函数。

3、路由钩子函数的参数:

to:想去哪个路由,to和$route是同样的对象

from:来自哪个路由对象,from和$route是同样的对象

next:下一步何去何从。

next(true):默认就是true,表示继续前行

next(false):不能前行

next(路径字符串或者对象):跳转到指定的路径。

二十二、vuex:

1、vuex是什么

vuex是一个状态(数据)管理工具,它能够完成组件之间的数据共享(组件的通信)

2、vuex的作用

1)、vuex能够保存全局数据(数据仓库),供整个应用使用

2)、vuex保存的数据是响应式的

3)、vuex保存的数据可以跟踪状态的变化

3、vuex的(核心概念)配置项:

1)、state : 数据仓库 ,存储所有的 共享数据 ,相当于vue组件里的data 2)、Getters : 在state的基础上 派生的数据, 相当于vue组件里 computed 3)、Mutations:修改state的数据时,用mutation,这与跟踪状态 有关系,只能有同步代码 4)、Action:解决mutation里只能有同步代码的问题,action里可以有异步代码

5)、modules:模块化

4、vuex的数据流转

vue组件 派发(dispatch)action。action里提交(commit)mutation,mutation里修改(mutate)state的数据,state的数修改后,会响应式渲染到模板上。

5、模块化怎么使用。

1)、当项目比较大时,所有的全局数据存放在state里,会非常混乱,怎么办?使用module,把数据分门别类的进行处理,即:模块化。 每个模块是一个独立的store。然后由总体的store引入所有的分模块store。

2)、怎么解决(getters,mutations,actions)的重名

1)、

namespaced:true

2)、使用模块中getters,mutations,actions时,前面需要加上模块名:

格式:

模块名/getters或者mutations或者actions的名字

6、辅助函数:

mapState, mapGetters,mapMutations, mapActions

1)、作用:

简化代码:在组件里不需要使用$store 了。

2)、具体使用:

mapState, mapGetters 会映射到组件的computed上

mapMutations, mapActions 会映射到组件的methods里。

二十三、pinia和vuex的区别

一、相同点:

都是用于vue项目开发的状态管理工具

二、不同的:

1、根仓库:

vuex只有一个跟仓库

pinia可以有多个根仓库

2、配置项:

vuex常用的配置项有:state,mutations,actions,getters,modules

pinia常用的配置项有:state,actions,getters,plugins。没有smutations和modules

3、组合式api支持

vuex的组合式api支持的不彻底

pinia里完全支持vue3的组合式api,如果使用组合式api,那么,就不需要使用配置项了。

三、可以再补充细节的区别,查官网。

二十四、异步更新队列:

1)、异步更新队列的目的:

目的是提高性能,避免无效的重复的DOM更新。即:vue中更新数据后,并不会立即更新DOM,而是把数据引起的DOM更新放入到异步更新队列(去重了)里。等待下次事件循环(tick),并在两个tick之间进行UI渲染。这样程序员就不能在更改数据后,立即获取更新后的DOM,也不知道什么时候DOM能够更新。基于此,vue提供了nextTick函数。程序员把操作更新后DOM的代码放入到nextTick的回调函数里。由nextTick内部,在更新完DOM后,调用回调函数。

2)、异步更新队列的原理

vue更新DOM的思路。使用的就是异步更新队列,异步的实现使用了事件循环。使用如下API。

MutationObserver:这是HTML5新增的API。用于监视DOM变动的接口,它可以监听一个DOM对象上发生的子节点删除、属性修改、文本内容修改等

另外,考虑到,微任务比宏任务耗时少,浏览器的兼容性。所以,vue中延迟调用优先级如下: Promise > MutationObserver > setImmediate > setTimeout

二十五、$nextTick的理解:

1)、为什么用Vue.nextTick()

由于vue在状态被修改后,对应的UI渲染是异步的【内部使用了异步更新队列】,而在写vue的代码时,如果希望在状态修改后,使用新的dom时,那么,我们没有办法知道什么时候dom被更新了。vue框架为了适应这种场景,提供了Vue.nextTick()

其实你这样理解的话,更清楚:

首先,要知道,updated钩子函数,是在任何状态发生变化时,都会调用的钩子函数。此钩子函数里拿到的就是最新的dom。

其次,$nextTick(); 是某个数据引起的updated,而不是所有数据引起的updated。

2)、怎么使用。

在数据修改后,立即调用 Vue.nextTick()函数。给nextTick()函数传入回调函数。在回调函数里就能拿到最新的代码。【vue会在dom更新后调用 $nextTick传入的回调函数的代码】

this.msg = "hello"
this.$nextTick(()=>{
     操作更新后DOM的代码。
});

二十三、反向代理:

1、反向代理解决的问题:跨域

2、反向代理的原理:

把请求发到代理服务器(这个是同源),然后,由代理服务器请求真正的后端api服务器。浏览器看到的是同源,所以,不会出现跨域问题。

3、代码:

1)、代码写在何处:

vite脚手架:vite.config.js ----》server -----》proxy。 ​ vue-cli脚手架:vue.config.js ---> devserver --->proxy。

2)、代码的关键点:

2.1)、请求地址的开始标识。

2.2)、目标路径(真正的后端api服务器地址)

2.3)、是否去掉开始标识。

4、补充一下:如果上线后,需要在nginx配置。

  • 22
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值