文章目录
1. vue的上下文如何配?
上下文的配置在在vue.config.js的publicPath下,如果没有硬编码,那么dev的路径配置在**.env.development下,生成环境在.env.production**下。
2. vue的环境如何区分和切换?
.env.development就是开发环境的配置,.env.production是生产环境的配置,在package.json的script下,配置了各个环境。
3. 正向代理和反向代理如何区分,特点是什么?
我们常说的代理也就是只正向代理,正向代理的过程,它隐藏了真实的请求客户端,服务端不知道真实的客户端是谁,客户端请求的服务都被代理服务器代替来请求,某些科学上网工具扮演的就是典型的正向代理角色
大家都有过这样的经历,拨打10086客服电话,可能一个地区的10086客服有几个或者几十个,你永远都不需要关心在电话那头的是哪一个,叫什么,男的,还是女的,漂亮的还是帅气的,你都不关心,你关心的是你的问题能不能得到专业的解答,你只需要拨通了10086的总机号码,电话那头总会有人会回答你,只是有时慢有时快而已。那么这里的10086总机号码就是我们说的反向代理。客户不知道真正提供服务人的是谁。
反向代理隐藏了真实的服务端,当我们请求 www.baidu.com 的时候,就像拨打10086一样,背后可能有成千上万台服务器为我们服务,但具体是哪一台,你不知道,也不需要知道,你只需要知道反向代理服务器是谁就好了,www.baidu.com 就是我们的反向代理服务器,反向代理服务器会帮我们把请求转发到真实的服务器那里去。Nginx就是性能非常好的反向代理服务器,用来做负载均衡。
两者的区别在于代理的对象不一样:正向代理代理的对象是客户端,反向代理代理的对象是服务端
4. vue的public下的静态资源文件夹build完之后在哪?
build完之后在dist下,访问的时候要把之前配置的上下文前缀加上,然后在加上dist下的路径,能够直接访问。
public文件夹下的文件,不经过webpack编译,不是require形式,引用的时候要加绝对路径,不能加./这样的。
5. vue.config.js的proxy的含义?
devServer: {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
'/api': {
target: `http://10.24.4.214:8098/api`,
changeOrigin: true,
pathRewrite: {
'^/api' : ''
}
}
}
}
/api表示需要去匹配请求时的url,然后替换成target的值
比如你页面里是写的
axios.post(’/api/list/gd’)
最终node去请求后台的地址是:http://10.24.4.214:8098/api/list/gd
但是你在浏览器里看到的还是:http://localhost:8888/api/list/gd,这时候就不存在跨越的问题的,node服务已经代理拿到数据了。
更多参考链接:https://www.jianshu.com/p/b358a91bdf2d
– 夏天有着迟暮的霞光,正如晚来的你皆是笑意。