在使用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了

案例參考：戳這裏