Vue开发及上线过程中遇到的坑（axios跨域，history模式下空白页问题）

最近公司在用vue开发一个网站，在这过程中，遇到了一些需要注意的点，在此先列出来，防止下次再次踩坑

1.在开发环境下，使用axios进行数据交互时，如果遇到跨域问题的话，可以在如下图

Config文件下的index.js 设置proxy代理

你可以新建一个专门放接口的js 给后台的接口 自己重命名一下

然后在main.js里引入该js  本项目中命名为url.js

将url添加到原型链上使他在每个页面上都可以使用

接下来就是用axios来请求了

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

  RewriteBase /

  RewriteRule ^index\.html$ - [L]

  RewriteCond %{REQUEST_FILENAME} !-f

  RewriteCond %{REQUEST_FILENAME} !-d

  RewriteRule . /index.html [L]

</IfModule>

其他的Nginx，node添加的代码在链接的文档里有相应的说明在此就不一一展示了

这样在后台配置好了之后，基本上是没问题了，但是因为项目中有用到嵌套路由，一刷新嵌套路由就有变成了空白页，最后的解决办法是将之前打包之前的配置‘/’ 变成‘./’

再变回原来的 ‘/’ 就好了