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

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理

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

格式：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

ajax

1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

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

91)]

[外链图片转存中…(img-K9uoS9PQ-1715837934892)]

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