在利用vue-cli中相遇的多少个难题

前言:框架没有高低之分,能化解须要就能够。在此之前没事用vue模仿过BOSS直聘App(纯属娱乐),实际工作中支出过1个后台管理体系,境遇过众多坑,终于闲下来稍微总计多少个难题分享一下!

一 、所碰着的题目(对cli方式开发不熟习绕路),以及化解办法

1:本地如何布署跨域和后台联调

2:若是非要使用jQuery,该怎么陈设到全局

3:npm run build打包后的文书怎么样行使相对路径,以及去掉不想要的.map文件

4:怎样利用自身包装的JS代码

5:要是选取axios去处理ajax怎么着放在全局

贰 、消除办法(基于vue2.3.3,私下认可的cli文件路径)

一 、本地怎么样布置跨域和后台湾同胞联谊会调(供给2点),a:在原先配置文件上丰裕配置,添加的职位是:config/index.js内的dev的proxyTable属性(类似webpack>devServer下的proxy),比如下图

图片 1

上海教室中意味是:当接口中遇见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:完毕之后什么行使如:

图片 2

如此在methods中动用的时候得带上自个儿陈设的api字段,这里为了本地和线上应用第3套代码定义了_this.isLocal字段。

 

贰 、假使非要使用JQ(一般不要),怎么着布署到全局,需求2步,

a:npm install -S jquery  安装JQ

b:添加配置,具体地方:build/webpack.base.conf.js内,先引入webpack

图片 3

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

图片 4

诸如此类就足以在methods中放心的运用:jquery了(此时和script标签引入的行使相同~)

 

三 、npm run build打包后的文书怎样使用绝对路径,以及去掉不想要的.map文件

那个化解办法相对简便易行,依旧改暗中认可的布局文件,具体地方:config/index.js中,如下图

图片 5

图中1是把相对路径改为相对路径(那样打包后就能够不管放在服务器上任何公文夹下),图中2是防止卷入后具有的.map文件

 

4、如何使用自身包装的JS代码,日常都是script标签引入,cli情势就不是的了。比如自己包裹了1个api.js在:src/js/api.js,如:

图片 6

Store包蕴:操作seeionStorage和localStorage以及原生Ajax的包裹,如何利用,要求导入

图片 7

如此那般就足以在methods中欢欣的利用本身包裹的方法了

图片 8

 

⑤ 、假如应用axios去处理ajax怎么样放在全局,要求2点

a:先npm install axios -S 

b:src/main.js内引入并挂在全局,如

图片 9

这样就足以在methods中快乐的选用this.$http去get或许post了

图片 10

案例参考:戳这里

相关文章