一。根據官方建議,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