最近公司在用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添加的代码在链接的文档里有相应的说明在此就不一一展示了
这样在后台配置好了之后，基本上是没问题了，但是因为项目中有用到嵌套路由，一刷新嵌套路由就有变成了空白页，最后的解决办法是将之前打包之前的配置‘/’ 变成‘./’
再变回原来的 ‘/’ 就好了
