在使用vue-cli中遇到的几个问题

前言：框架没有好坏之分，能解决需求就能够。以前没事用vue模仿过BOSS直聘App(纯属娱乐)，实际工做中开发过一个后台管理系统，遇到过很多坑，终于闲下来稍微总结几个问题分享一下！

1、所遇到的问题(对cli模式开发不熟悉绕路)，以及解决办法

1：本地如何配置跨域和后台联调

2：若是非要使用jQuery，该如何配置到全局

3：npm run build打包后的文件如何使用相对路径，以及去掉不想要的.map文件

4：如何使用本身封装的JS代码

5：若是使用axios去处理ajax如何放在全局

2、解决办法(基于vue2.3.3,默认的cli文件路径)

一、本地如何配置跨域和后台联调(须要2点)，a:在原来配置文件上添加配置，添加的位置是：config/index.js内的dev的proxyTable属性(相似webpack>devServer下的proxy)，好比下图

上图中寓意是：当接口中遇到api字段的时候会映射到：“http://wjf.localTest.com:80”这个地址(须要后台配置容许跨域)，且api会被替换为空，api是自定义的字段名字只是在请求接口的时候和配置文件协商的一个相似id的东西。不耽误打包上线。

b:映射地址的IP和映射地址到本身电脑的HOSTS文件，(例如http://wjf.localTest.com:80的ip是：123.321.168.192),此时只须要把：123.321.168.192     wjf.localTest.com 添加到本机电脑的HOSTS文件便可解决本地跨域调试。

c：完成以后如何使用如：

这样在methods中使用的时候得带上本身配置的api字段，这里为了本地和线上使用第一套代码定义了_this.isLocal字段。

 

二、若是非要使用JQ(通常不用)，如何配置到全局，须要2步，

a：npm install -S jquery  安装JQ

b：添加配置，具体位置：build/webpack.base.conf.js内，先引入webpack

再配置个webpack插件把JQ挂在全局

这样就能够在methods中放心的使用：jquery了(此时和script标签引入的使用同样~)

 

三、npm run build打包后的文件如何使用相对路径，以及去掉不想要的.map文件

这个解决办法相对简单，仍是改默认的配置文件，具体位置：config/index.js中，以下图

图中1是把绝对路径改成相对路径(这样打包后就能够随便放在服务器上任何文件夹下)，图中2是避免打包后全部的.map文件

 

四、如何使用本身封装的JS代码，日常都是script标签引入，cli模式就不是的了。好比本身封装了一个api.js在：src/js/api.js，如：

Store包括：操做seeionStorage和localStorage以及原生Ajax的封装，如何使用，须要导入

这样就能够在methods中愉快的使用本身封装的方法了

 

五、若是使用axios去处理ajax如何放在全局，须要2点

a：先npm install axios -S 

b：src/main.js内引入并挂在全局，如

这样就能够在methods中愉快的使用this.$http去get或者post了

案例参考：戳这里