vue配置二級目錄&vue-axios跨域辦法&谷歌瀏覽器設置跨域

 

一。根據官方建議，dist打包的項目文件放在服務器根目錄下，可是不少時候，咱們並不能這樣作，當涉及到二級目錄設置多層深埋的時候，就須要在webpack配置文件裏去設置一下了。

在webpack.config.js（config—>index.js）文件裏設置：

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    //assetsPublicPath: '/dist',//若是項目放在二級目錄，修改此處++2018年2月28日
    assetsPublicPath: '/cc',//若是項目放在二級目錄，修改此處++2018年2月28日
........

　　這樣打包後，cc就是你網站的二級目錄，例如：websong.wang/lin7vue 這裏的cc就是/lin7vue

二。原生ajax-->jQuery.ajax-->vue-axios可謂一路風雨，可是vue-axios不支持跨域，這裏的跨域其實分開說，一種是開發時候，一種是上線。

1.咱們開發時確定要測試數據的，這時候的跨域就非常個大問題。解決辦法，修改webpack配置：

在webpack.config.js（config—>index.js）文件裏設置：

dev:{
proxyTable: {
      '/api': {
        target: 'http://baidu.com', //設置調用接口域名和端口號別忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/' //這裏理解成用‘/api’代替target裏面的地址，組件中咱們調接口時直接用/api代替
          // 好比我要調用'http://0.0:300/user/add'，直接寫‘/api/user/add’便可 代理後地址欄顯示/
        }
      }
    }  
}

　　

2.安裝vue-axios:

經過查閱，知道vue-axios其實就是對axios的封裝，網址：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上就列舉了這三個寫法，其詳細使用方法和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官網：https://www.npmjs.com/package/axios 裏面有詳細的使用說明

3.上線項目vue-axios跨域：

在咱們的項目中，不可能固定只向一個後端接口請求數據，並且跨域配置只針對dev開發環境，怎麼辦？有辦法：參考：https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format

個人代碼：

 

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

chrome瀏覽器的跨域設置——包括版本49先後兩種設置

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

版本號49以前的跨域設置：

先介紹一下老方法，參考了一些網上的教程，其實直接在打開命令上加--disable-web-security就能夠了。

具體作法爲：

1.下載並安裝好chorme瀏覽器後在桌面找到瀏覽器快捷圖標並點擊鼠標右鍵的屬性一欄。
2.在屬性頁面中的目標輸入框里加上   --disable-web-security  以下圖所示：

3.點擊應用和肯定後關閉屬性頁面，並打開chrome瀏覽器。若是瀏覽器出現提示「你使用的是不受支持的命令標記 --disable-web-security」，那麼說明配置成功。

版本號49以後的chrome跨域設置

chrome的版本升到49以後，跨域設置比之前嚴格了，在打開命令上加--disable-web-security以後還須要給出新的用戶我的信息的目錄。衆所周知chrome是須要用gmail地址登陸的瀏覽器，登陸後就會生成一個存儲我的信息的目錄，保存用戶的收藏、歷史記錄等我的信息。49版本以後，若是設置chrome瀏覽器爲支持跨域模式，須要指定出一個我的信息目錄，而不能使用默認的目錄，估計是chrome瀏覽器怕用戶勿使用跨域模式泄露本身的我的信息（主要是cookie，不少網站的登陸token信息都是保存在cookie裏）。

具體作法爲：

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

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

3.點擊應用和肯定後關閉屬性頁面，並打開chrome瀏覽器。

再次打開chrome，發現有「--disable-web-security」相關的提示，說明chrome又能正常跨域工做了。

 

 

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