vue 簡介

Vue.js（讀音 /vjuː/, 類似于 view） 是一套構建用戶界面的漸進式框架。

Vue 只關注視圖層， 采用自底向上增量開發(fā)的設計。

Vue 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。

Vue 學習起來非常簡單，本教程基于 Vue 2.1.8 版本測試。

當我們在路由里面配置成以下代理可以解決跨域問題

proxyTable: {
 '/goods/*': {
 target: 'http://localhost:3000'
 },
 '/users/*': {
 target: 'http://localhost:3000'
 }
 },

這種配置方式在一定程度上解決了跨域問題，但是會帶來一些問題，

比如我們的vue 路由 也命名為 goods，這時候就會產生了沖突，

如果項目中接口很多，都在這里配置是很麻煩的，也容易產生路由沖突。

正確的姿勢

如果把所有的接口，統(tǒng)一規(guī)范為一個入口，在一定程度上會解決沖突

把以上配置統(tǒng)一前面加上 /api/

proxyTable: {
 '/api/**': {
 target: 'http://localhost:3000'
 },
 },

如果我們配置成這種方式,在使用http請求的時候就會發(fā)生變化，會在請求前面加上一個api，相對路由也會發(fā)生變化，也會在接口前面加上api，這樣也會很麻煩,我們可以使用以下方式來解決這個問題

proxyTable: {
 '/api/**': {
 target: 'http://localhost:3000',
 pathRewrite:{
 '^/api':'/'
 }
 },
 },

上面這個代碼，就是把咱們虛擬的這個api接口，去掉，此時真正去后端請求的時候，不會加上api這個前綴了，那么這樣我們前臺http請求的時候，還必須加上api前綴才能匹配到這個代理,代碼如下：

logout(){
 axios.post('/api/users/logout').then(result=>{
 let res = result.data;
 this.nickName = '';
 console.log(res);
 })
 },
 getGoods(){
 axios.post('/api/goods/list').then(result=>{
 let res = result.data;
 this.nickName = '';
 console.log(res);
 })
 }

我們可以利用axios的baseUrl直接默認值是 api，這樣我們每次訪問的時候，自動補上這個api前綴，就不需要我們自己手工在每個接口上面寫這個前綴了

在入口文件里面配置如下：

import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = 'api'

如果這配置 ‘api/' 會默認讀取本地的域

上面這樣配置的話，不會區(qū)分生產和開發(fā)環(huán)境

在config 文件夾里面新建一個 api.config.js 配置文件

const isPro = Object.is(process.env.NODE_ENV, 'production')
module.exports = {
 baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/'
}

然后在main.js 里面引入,這樣可以保證動態(tài)的匹配生產和開發(fā)的定義前綴

import apiConfig from '../config/api.config'
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = apiConfig.baseUrl

經(jīng)過上面配置后，在dom里面可以這樣輕松的訪問,也不需要在任何組件里面引入axios模塊了。

logout(){
 this.$http.post('/users/logout').then(result=>{
 let res = result.data;
 this.nickName = '';
 console.log(res);
 })
 },
 getGoods(){
 this.$http.post('/goods/list').then(result=>{
 let res = result.data;
 this.nickName = '';
 console.log(res);
 })
 }

最終代碼

在代理里面配置

proxyTable: {
 '/api/**': {
 target: 'http://localhost:3000',
 pathRewrite:{
 '^/api':'/'
 }
 },
 },

在config里面的api.config.js 配置

在config 文件夾里面新建一個 api.config.js 配置文件

const isPro = Object.is(process.env.NODE_ENV, 'production')
module.exports = {
 baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/'
}

關于生產和開發(fā)配置不太了解

可以去 dev-server.js 里面看配置代碼

const webpackConfig = (process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'production') ?
 require('./webpack.prod.conf') :
 require('./webpack.dev.conf')

在main.js 入口文件里面配置

import apiConfig from '../config/api.config'
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = apiConfig.baseUrl

在dom里面請求api的姿勢

logout(){
 this.$http.post('/users/logout').then(result=>{
 let res = result.data;
 this.nickName = '';
 console.log(res);
 })
 },
 getGoods(){
 this.$http.post('/goods/list').then(result=>{
 let res = result.data;
 this.nickName = '';
 console.log(res);
 })
 }

PS:下面通過一段代碼學習下vue下跨域設置

1、在使用vue開發(fā)的時候經(jīng)常要涉及到跨域的問題，其實在vue cli中是有我們設置跨域請求的文件的。

2、當跨域無法請求的時候我們可以修改工程下config文件夾下的index.js中的dev:{}部分。

dev: {
 env: require('./dev.env'),
 port: 8080,
 autoOpenBrowser: false,
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {
 '/api': {
 target: 'http://api.douban.com/v2',
 changeOrigin: true,
 pathRewrite: {
 '^/api': ''
 }
 }
 },
 // CSS Sourcemaps off by default because relative paths are "buggy"
 // with this option, according to the CSS-Loader README
 // (https://github.com/webpack/css-loader#sourcemaps)
 // In our experience, they generally work as expected,
 // just be aware of this issue when enabling this option.
 cssSourceMap: false
}

將target設置為我們需要訪問的域名。

3、然后在main.js中設置全局屬性：

Vue.prototype.HOST = '/api'

4、至此，我們就可以在全局使用這個域名了，如下：

var url = this.HOST + '/movie/in_theaters'
 this.$http.get(url).then(res => {
 this.movieList = res.data.subjects;
 },res => {
 console.info('調用失敗');
 });

總結

以上所述是小編給大家介紹的vue解決跨域路由沖突問題思路解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！