每当使用vue-cli中碰到的几乎单问题

序言:框架没有好坏之分,能解决需要就是足以。之前没事用vue模仿过BOSS直聘App(纯属娱乐),实际工作负开销过一个后台管理网,遇到了许多坑,终于闲下来稍微总结几个问题分享一下!

同、所碰到的题材(对cli模式开发不熟识绕路),以及解决办法

1:本地如何安排跨域和后台联调

2:如果无要是采取jQuery,该如何安排到全局

3:npm run build打包后的文本如何采取相对路径,以及去丢不思如果的.map文件

4:如何运用自己包装的JS代码

5:如果运用axios去处理ajax如何在全局

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

1、本地如何布置跨域和后台联调(需要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字段,这里为本地与线及采取第一效仿代码定义了_this.isLocal字段。

 

2、如果无要是采用JQ(一般不要),如何安排到全局,需要2步,

a:npm install -S jquery  安装JQ

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

图片 3

再次安排单webpack插件把JQ挂在全局

图片 4

如此这般就得当methods中放心的采取:jquery了(此时以及script标签引入的使用相同~)

 

3、npm run build打包后的文本如何行使相对路径,以及去丢不思量如果的.map文件

夫解决办法相对简单,还是改默认的部署文件,具体位置:config/index.js中,如下图

图片 5

贪图中1凡管绝对路径改也相对路径(这样打包后即足以不管在服务器上任何公文夹下),图备受2是免卷入后拥有的.map文件

 

4、如何采取自己包的JS代码,平常还是script标签引入,cli模式就是不是的了。比如自己包了一个api.js在:src/js/api.js,如:

图片 6

Store包括:操作seeionStorage和localStorage以及原生Ajax的包,如何使,需要导入

图片 7

诸如此类就算可以当methods中怡的采取自己包的方了

图片 8

 

5、如果利用axios去处理ajax如何在全局,需要2碰

a:先npm install axios -S 

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

图片 9

这般就算好当methods中怡的运this.$http去get或者post了

图片 10

案例参考:戳这里

相关文章