在使用vue cli中遇到的幾個問題

一、所遇到的問題(對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欄位的時候會對映到：「這個位址(需要後台配置允許跨域)，且api會被替換為空，api是自定義的欄位名字只是在請求介面的時候和配置檔案協商的乙個類似id的東西。不耽誤打包上線。

b:對映位址的ip和對映位址到自己電腦的hosts檔案，(例如的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了

案例參考：戳這裡