Vue开发及上线过程中遇到的坑（axios跨域，history模式下空白页问题）_axios采用history刷新后找不到页面(1)

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Axios的Get请求：

格式：this.axios.get(this.url.api.categoryQueryWeb).then(function (res) {})

带参数的 用params：{参数名：值,参数名：值}

POST请求

需先定义一个

let params = new URLSearchParams();

然后将参数给拼接进去即可

**2.**在使用vue.js框架的时候，有时候会希望在页面渲染完成之后，再来执行某个函数方法比如获取某个列表的高度时，必须要在页面完全渲染之后才可以，页面没有加载完成之前，获取到的高度不准确。

Vue文档中有个mounted函数，说是挂载到实例上去之后调用该钩子，差不多相当于在页面渲染之后再加载，但是经检测，函数放在mounted里执行时，高度并不正确，而且在函数那打个断点的话，在执行到这时，列表并没有渲染出来。再查看文档有个nextTick方法代表等到整个视图渲染完毕之后调用，但是结果还是不正确

最后查了一些资料，发现可以通过watch和nextTick 来达到我想要的效果

headImgList 是我要监听的列表数组，当他全部加载结束之后再调用 pcGlasses() 方法

**3.**Vue项目打包上传

1.配置线上环境的接口地址

找到config目录下的prod.env.js 配置你的线上服务地址

然后将你之前的url.js  里的地址改为

let apiUrl = process.env.API_ROOT

就好了

2.Vue项目打包

在执行 npm run build 之前得先改一下配置文件找到config目录下的index文件，将下图红框位置上的“/” 改为 “./” ;“true”改为 “false”

按上述打包访问链接里会多个# ，如下图所示

如何把”#” 给去掉呢我们可以用路由的 history 模式 在router的index.js 里加一句mode:’history’

这样链接里就没有#号了，但是出现一个问题就是放到线上之后一刷新页面就变成空白页或者404找不到了，这是为什么呢，vue文档里有说明history 模式下要想正常运行还需要后端的支持具体可撮：https://router.vuejs.org/zh/guide/essentials/history-mode.html

如果服务器是apache的话，需要在配置文件中加入下面几句代码：

<IfModule mod_rewrite.c>

RewriteEngine On

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。

所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。