在使用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),比如下圖

上圖中寓意是:當接口中遇到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字段。

 

2、如果非要使用JQ(一般不用),如何配置到全局,需要2步,

a:npm install -S jquery  安裝JQ

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

再配置個webpack插件把JQ掛在全局

這樣就可以在methods中放心的使用:jquery了(此時和script標簽引入的使用一樣~)

 

3、npm run build打包后的文件如何使用相對路徑,以及去掉不想要的.map文件

這個解決辦法相對簡單,還是改默認的配置文件,具體位置:config/index.js中,如下圖

圖中1是把絕對路徑改為相對路徑(這樣打包后就可以隨便放在服務器上任何文件夾下),圖中2是避免打包后所有的.map文件

 

4、如何使用自己封裝的JS代碼,平常都是script標簽引入,cli模式就不是的了。比如自己封裝了一個api.js在:src/js/api.js,如:

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

這樣就可以在methods中愉快的使用自己封裝的方法了

 

5、如果使用axios去處理ajax如何放在全局,需要2點

a:先npm install axios -S 

b:src/main.js內引入並掛在全局,如

這樣就可以在methods中愉快的使用this.$http去get或者post了

案例參考:戳這里


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM