?

一。根據(jù)官方建議，dist打包的項(xiàng)目文件放在服務(wù)器根目錄下，但是很多時候，我們并不能這樣做，當(dāng)涉及到二級目錄設(shè)置多層深埋的時候，就需要在webpack配置文件里去設(shè)置一下了。

在webpack.config.js（config—>index.js）文件里設(shè)置：

build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',//assetsPublicPath: '/dist',//如果項(xiàng)目放在二級目錄，修改此處++2018年2月28日assetsPublicPath: '/cc',//如果項(xiàng)目放在二級目錄，修改此處++2018年2月28日 ........

　　這樣打包后，cc就是你網(wǎng)站的二級目錄，例如：websong.wang/lin7vue 這里的cc就是/lin7vue

二。原生ajax-->jQuery.ajax-->vue-axios可謂一路風(fēng)雨，但是vue-axios不支持跨域，這里的跨域其實(shí)分開說，一種是開發(fā)時候，一種是上線。

1.我們開發(fā)時肯定要測試數(shù)據(jù)的，這時候的跨域就很是個大問題。解決辦法，修改webpack配置：

在webpack.config.js（config—>index.js）文件里設(shè)置：

dev:{ proxyTable: {'/api': {target: 'http://baidu.com', //設(shè)置調(diào)用接口域名和端口號別忘了加httpchangeOrigin: true,pathRewrite: {'^/api': '/' //這里理解成用‘/api’代替target里面的地址，組件中我們調(diào)接口時直接用/api代替// 比如我要調(diào)用'http://0.0:300/user/add'，直接寫‘/api/user/add’即可 代理后地址欄顯示/}}} }

　　

2.安裝vue-axios:

通過查閱，知道vue-axios其實(shí)就是對axios的封裝，網(wǎng)址：https://www.npmjs.com/package/vue-axios

安裝：npm install --save axios vue-axios

注入：

import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)

　　

使用：

//三種可用方法，npm上就列舉了這三個寫法，其詳細(xì)使用方法和axios一樣 Vue.axios.get(api).then((response) => {console.log(response.data) })this.axios.get(api).then((response) => {console.log(response.data) })this.$http.get(api).then((response) => {console.log(response.data) })

　　axios官網(wǎng)：https://www.npmjs.com/package/axios?里面有詳細(xì)的使用說明

3.上線項(xiàng)目vue-axios跨域：

在我們的項(xiàng)目中，不可能固定只向一個后端接口請求數(shù)據(jù)，而且跨域配置只針對dev開發(fā)環(huán)境，怎么辦？有辦法：參考：https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format

我的代碼：

?

三。配置谷歌瀏覽器允許跨域

chrome瀏覽器的跨域設(shè)置——包括版本49前后兩種設(shè)置

查看谷歌瀏覽器版本號：地址欄輸入：chrome://settings/help

版本號49之前的跨域設(shè)置：

先介紹一下老方法，參考了一些網(wǎng)上的教程，其實(shí)直接在打開命令上加--disable-web-security就可以了。

具體做法為：

1.下載并安裝好chorme瀏覽器后在桌面找到瀏覽器快捷圖標(biāo)并點(diǎn)擊鼠標(biāo)右鍵的屬性一欄。
2.在屬性頁面中的目標(biāo)輸入框里加上?? --disable-web-security? 如下圖所示：

3.點(diǎn)擊應(yīng)用和確定后關(guān)閉屬性頁面，并打開chrome瀏覽器。如果瀏覽器出現(xiàn)提示“你使用的是不受支持的命令標(biāo)記 --disable-web-security”，那么說明配置成功。

版本號49之后的chrome跨域設(shè)置

chrome的版本升到49之后，跨域設(shè)置比以前嚴(yán)格了，在打開命令上加--disable-web-security之后還需要給出新的用戶個人信息的目錄。眾所周知chrome是需要用gmail地址登錄的瀏覽器，登錄后就會生成一個存儲個人信息的目錄，保存用戶的收藏、歷史記錄等個人信息。49版本之后，如果設(shè)置chrome瀏覽器為支持跨域模式，需要指定出一個個人信息目錄，而不能使用默認(rèn)的目錄，估計(jì)是chrome瀏覽器怕用戶勿使用跨域模式泄露自己的個人信息（主要是cookie，很多網(wǎng)站的登錄token信息都是保存在cookie里）。

具體做法為：

1.在電腦上新建一個目錄，例如：C:\MyChromeDevUserData

2.在屬性頁面中的目標(biāo)輸入框里加上 ??--disable-web-security --user-data-dir=C:\MyChromeDevUserData，--user-data-dir的值就是剛才新建的目錄。

3.點(diǎn)擊應(yīng)用和確定后關(guān)閉屬性頁面，并打開chrome瀏覽器。

再次打開chrome，發(fā)現(xiàn)有“--disable-web-security”相關(guān)的提示，說明chrome又能正常跨域工作了。

?

?

摘自：https://www.cnblogs.com/cshi/p/5660039.html

轉(zhuǎn)載于:https://www.cnblogs.com/webSong/p/8652092.html

總結(jié)

以上是生活随笔為你收集整理的vue配置二级目录vue-axios跨域办法谷歌浏览器设置跨域的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。