vue開發微信商城項目總結之四--本地代理處理跨域問題

關於項目的基本描述，參見

vue開發微信商城項目總結之一–項目介紹

vue開發微信商城項目總結之二–Eslint配置

vue開發微信商城項目總結之三–根據不一樣的開發環境作配置

以前處理跨域問題是經過jsonp，可是隻有開發環境是跨域的，代碼打包後上傳到服務器便再也不跨域，因此ajax在本地作了判斷，判斷是不是跨域，跨域則走jsonp不然其餘正常調用

能夠經過本地配置nginx作代理來處理跨域，可是做爲一個前端來講，學習成本略高，

後來發現vue-cli中也有代理，解決開發環境跨域的問題，

config>index.js 在dev中找到中找到proxyTable，並對其進行配置，個人index.js以下

var path = require('path')
var new_date = new Date();

/**日期時間格式化 20170413170432**/
var date_month = new_date.getMonth() <= 8 ? '0' + (new_date.getMonth() + 1) : (new_date.getMonth() + 1);
var date_day = new_date.getDate() <= 9 ? '0' + new_date.getDate() : new_date.getDate();
var date_hour = new_date.getHours() <= 9 ? '0' + new_date.getHours() : new_date.getHours();
var date_min = new_date.getMinutes() <= 9 ? '0' + new_date.getMinutes() : new_date.getMinutes();
var date_sec = new_date.getSeconds() <= 9 ? '0' + new_date.getSeconds() : new_date.getSeconds();
var new_dateTime = new_date.getFullYear() + "年" + date_month + "月" + date_day + "日" + date_hour + "時" + date_min + "分" + date_sec + '秒';

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/' + new_dateTime + 'app' + '/index.html'), // 編譯輸入的 index.html 文件
    assetsRoot: path.resolve(__dirname, '../dist/' + new_dateTime + 'app'), // 編譯輸出的靜態資源路徑
    assetsSubDirectory: 'static', // 編譯輸出的二級目錄
    assetsPublicPath: './', // 編譯發佈的根目錄，可配置爲資源服務器域名或 CDN 域名
    productionSourceMap: false, // 是否開啓 cssSourceMap
    productionGzip: false, // 是否開啓 gzip
    productionGzipExtensions: ['js', 'css'], // 須要使用 gzip 壓縮的文件擴展名
    bundleAnalyzerReport: process.env.npm_config_report
  },
  buildppe: {
    env: require('./ppe.env'),
    index: path.resolve(__dirname, '../dist/' + new_dateTime + 'ppe' + '/index.html'), // 編譯輸入的 index.html 文件
    assetsRoot: path.resolve(__dirname, '../dist/' + new_dateTime + 'ppe'), // 編譯輸出的靜態資源路徑
    assetsSubDirectory: 'static', // 編譯輸出的二級目錄
    assetsPublicPath: './',// 編譯發佈的根目錄，可配置爲資源服務器域名或 CDN 域名
    productionSourceMap: false, // 是否開啓 cssSourceMap
    productionGzip: false, // 是否開啓 gzip
    productionGzipExtensions: ['js', 'css'], // 須要使用 gzip 壓縮的文件擴展名
    bundleAnalyzerReport: process.env.npm_config_report
  },
  buildddd: {
    env: require('./ddd.env'),
    index: path.resolve(__dirname, '../dist/' + new_dateTime + 'dev' + '/index.html'), // 編譯輸入的 index.html 文件
    assetsRoot: path.resolve(__dirname, '../dist/' + new_dateTime + 'dev'), // 編譯輸出的靜態資源路徑
    assetsSubDirectory: 'static', // 編譯輸出的二級目錄
    assetsPublicPath: './',// 編譯發佈的根目錄，可配置爲資源服務器域名或 CDN 域名
    productionSourceMap: false, // 是否開啓 cssSourceMap
    productionGzip: false, // 是否開啓 gzip
    productionGzipExtensions: ['js', 'css'], // 須要使用 gzip 壓縮的文件擴展名
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require('./dev.env'),
    port: 1111,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/baseUrl': { /* 當發生跨域請求是調用此接口 本地代理*/
        target: 'https://api.douban.com/v2/event/list?loc=108288&start=1&count=3',
        changeOrigin: true,
        pathRewrite: {
          '^/baseUrl': ''
        }
      },
    },
    cssSourceMap: false
  }
}

在使用的時候

get () { // 開發環境跨域時調用本地代理 具體查看 config-->index.js
      this.$http.post(process.env.baseUrl)
        .then(res => {
          console.log(res)
          this.data = res
        })
    }

config>config>dev.env.js

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  baseUrl: '"/baseUrl"',//處理跨域
  /* 福幣商品skuID */
  rechargeList: `[{
    skuid: "020d73154fea407aba111e8a0b010cb1",
    name: "開發",
    thumbPath: ''
  }, {
    skuid: "b7ef02ebab9f4edf9cb44cb184f7dec3",
    name: "開發",
    thumbPath: ''
  }, {
    skuid: "52856479a6e74c4e9ea943ce6b4d4827",
    name: "開發",
    thumbPath: ''
  }, {
    skuid: "a4b821d1bcf34d4b9af286c1a9cedc92",
    name: "開發",
    thumbPath: ''
  }]`,
 
})

process.env 是根據不一樣的環境調用不一樣的接口，具體看這裏個人項目中一共四個環境

開發環境 dev
測試環境 ddd
預生產環境 ppe
生產環境（正式環境） production

項目地址在這裏