成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

vue開發(fā)微信商城項(xiàng)目總結(jié)之四--本地代理處理跨域問題

Leck1e / 1500人閱讀

摘要：關(guān)于項(xiàng)目的基本描述，參見開發(fā)微信商城項(xiàng)目總結(jié)之一項(xiàng)目介紹開發(fā)微信商城項(xiàng)目總結(jié)之二配置開發(fā)微信商城項(xiàng)目總結(jié)之三根據(jù)不同的開發(fā)環(huán)境做配置之前處理跨域問題是通過，但是只有開發(fā)環(huán)境是跨域的，代碼打包后上傳到服務(wù)器便不再跨域，所以在本地做了判斷，判斷

關(guān)于項(xiàng)目的基本描述，參見

vue開發(fā)微信商城項(xiàng)目總結(jié)之一–項(xiàng)目介紹

vue開發(fā)微信商城項(xiàng)目總結(jié)之二–Eslint配置

vue開發(fā)微信商城項(xiàng)目總結(jié)之三–根據(jù)不同的開發(fā)環(huán)境做配置

之前處理跨域問題是通過jsonp，但是只有開發(fā)環(huán)境是跨域的，代碼打包后上傳到服務(wù)器便不再跨域，所以ajax在本地做了判斷，判斷是否是跨域，跨域則走jsonp否則其他正常調(diào)用

可以通過本地配置nginx做代理來處理跨域，但是作為一個(gè)前端來說，學(xué)習(xí)成本略高，

后來發(fā)現(xiàn)vue-cli中也有代理，解決開發(fā)環(huán)境跨域的問題，

config>index.js 在dev中找到中找到proxyTable，并對(duì)其進(jìn)行配置，我的index.js如下

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

/**日期時(shí)間格式化 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 + "時(shí)" + 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"), // 編譯輸出的靜態(tài)資源路徑
    assetsSubDirectory: "static", // 編譯輸出的二級(jí)目錄
    assetsPublicPath: "./", // 編譯發(fā)布的根目錄，可配置為資源服務(wù)器域名或 CDN 域名
    productionSourceMap: false, // 是否開啟 cssSourceMap
    productionGzip: false, // 是否開啟 gzip
    productionGzipExtensions: ["js", "css"], // 需要使用 gzip 壓縮的文件擴(kuò)展名
    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"), // 編譯輸出的靜態(tài)資源路徑
    assetsSubDirectory: "static", // 編譯輸出的二級(jí)目錄
    assetsPublicPath: "./",// 編譯發(fā)布的根目錄，可配置為資源服務(wù)器域名或 CDN 域名
    productionSourceMap: false, // 是否開啟 cssSourceMap
    productionGzip: false, // 是否開啟 gzip
    productionGzipExtensions: ["js", "css"], // 需要使用 gzip 壓縮的文件擴(kuò)展名
    bundleAnalyzerReport: process.env.npm_config_report
  },
  builffffdd: {
    env: require("./ffffd.env"),
    index: path.resolve(__dirname, "../dist/" + new_dateTime + "dev" + "/index.html"), // 編譯輸入的 index.html 文件
    assetsRoot: path.resolve(__dirname, "../dist/" + new_dateTime + "dev"), // 編譯輸出的靜態(tài)資源路徑
    assetsSubDirectory: "static", // 編譯輸出的二級(jí)目錄
    assetsPublicPath: "./",// 編譯發(fā)布的根目錄，可配置為資源服務(wù)器域名或 CDN 域名
    productionSourceMap: false, // 是否開啟 cssSourceMap
    productionGzip: false, // 是否開啟 gzip
    productionGzipExtensions: ["js", "css"], // 需要使用 gzip 壓縮的文件擴(kuò)展名
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require("./dev.env"),
    port: 1111,
    autoOpenBrowser: true,
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {
      "/baseUrl": { /* 當(dāng)發(fā)生跨域請(qǐng)求是調(diào)用此接口 本地代理*/
        target: "https://api.douban.com/v2/event/list?loc=108288&start=1&count=3",
        changeOrigin: true,
        pathRewrite: {
          "^/baseUrl": ""
        }
      },
    },
    cssSourceMap: false
  }
}

在使用的時(shí)候

get () { // 開發(fā)環(huán)境跨域時(shí)調(diào)用本地代理 具體查看 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: "開發(fā)",
    thumbPath: ""
  }, {
    skuid: "b7ef02ebab9f4edf9cb44cb184f7dec3",
    name: "開發(fā)",
    thumbPath: ""
  }, {
    skuid: "52856479a6e74c4e9ea943ce6b4d4827",
    name: "開發(fā)",
    thumbPath: ""
  }, {
    skuid: "a4b821d1bcf34d4b9af286c1a9cedc92",
    name: "開發(fā)",
    thumbPath: ""
  }]`,
 
})

process.env 是根據(jù)不同的環(huán)境調(diào)用不同的接口，具體看這里我的項(xiàng)目中一共四個(gè)環(huán)境

開發(fā)環(huán)境 dev
測(cè)試環(huán)境 ffffd
預(yù)生產(chǎn)環(huán)境 ppe
生產(chǎn)環(huán)境（正式環(huán)境） production

項(xiàng)目地址在這里

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/88597.html

相關(guān)文章

  • vue開發(fā)微信商城項(xiàng)目總結(jié)之五--vue實(shí)現(xiàn)九宮格抽獎(jiǎng)

    摘要：根據(jù)產(chǎn)品提出的需求，需要做一個(gè)抽獎(jiǎng)活動(dòng)頁(yè)面需求簡(jiǎn)介九宮格抽獎(jiǎng)，中獎(jiǎng)概率可配置，以九宮格轉(zhuǎn)盤的形式進(jìn)行抽獎(jiǎng)，獎(jiǎng)品分為三類，實(shí)物類獎(jiǎng)品，收貨人信息可編輯，默認(rèn)為登陸用戶，可生成訂單福幣類獎(jiǎng)品，直接發(fā)放，可在交易明細(xì)中查看優(yōu)惠劵類獎(jiǎng)品，交易明細(xì)中 根據(jù)產(chǎn)品提出的需求，需要做一個(gè)抽獎(jiǎng)活動(dòng)頁(yè)面 需求簡(jiǎn)介 九宮格抽獎(jiǎng)，中獎(jiǎng)概率可配置，以九宮格轉(zhuǎn)盤的形式進(jìn)行抽獎(jiǎng)，獎(jiǎng)品分為三類， 實(shí)物類獎(jiǎng)品，收貨人...

    CoorChice 評(píng)論0 收藏0

  • vue開發(fā)微信商城項(xiàng)目總結(jié)之三--根據(jù)不同的開發(fā)環(huán)境做配置

    摘要：項(xiàng)目是基于搭建，項(xiàng)目分為開發(fā)環(huán)境，測(cè)試環(huán)境，預(yù)生產(chǎn)環(huán)境，生產(chǎn)環(huán)境，其中開發(fā)環(huán)境和測(cè)試環(huán)境調(diào)用同一個(gè)接口，開發(fā)環(huán)境調(diào)用服務(wù)器端的測(cè)試接口會(huì)跨域，以上需求就引發(fā)了一些問題，問題一測(cè)試環(huán)境包括開發(fā)環(huán)境，并且開發(fā)環(huán)境跨域，預(yù)生產(chǎn)環(huán)境，生產(chǎn)環(huán)境，有 項(xiàng)目是基于vue-cli搭建，項(xiàng)目分為開發(fā)環(huán)境，測(cè)試環(huán)境，預(yù)生產(chǎn)環(huán)境，生產(chǎn)環(huán)境，其中開發(fā)環(huán)境和測(cè)試環(huán)境調(diào)用同一個(gè)接口，開發(fā)環(huán)境調(diào)用服務(wù)器端的測(cè)試接口...

    Magicer 評(píng)論0 收藏0

  • vue開發(fā)微信商城項(xiàng)目總結(jié)之六--關(guān)于vuex的思考

    先對(duì)項(xiàng)目進(jìn)行一下簡(jiǎn)單的介紹 vue開發(fā)微信商城項(xiàng)目總結(jié)之一–項(xiàng)目介紹 項(xiàng)目開發(fā)初期，由于項(xiàng)目比較著急上線，前端的框架在選型上比較倉(cāng)促，只是因?yàn)関ue學(xué)習(xí)成本較低，就選了它，沒有什么別的原因， 之前看過angular2一段時(shí)間，又趁著周末看了兩天vue，就倉(cāng)促開發(fā)，所以埋下了很多坑，項(xiàng)目（項(xiàng)目目前沒有對(duì)游客開放，是2B2C的模式）上線后，回頭填坑，發(fā)現(xiàn)了很多問題，因?yàn)橹耙恢笔腔贘query模式的...

    PrototypeZ 評(píng)論0 收藏0

  • 使用 vue2.0 開發(fā)微信公眾號(hào)下前后端分離的SPA站點(diǎn)的填坑之旅

    摘要：目前正在寫一個(gè)微信公眾號(hào)的小項(xiàng)目，記錄一下遇到的問題和解決方法主要是前端。前端提交時(shí)使用，在后端再取出對(duì)應(yīng)的微信支付看了下文檔，以前是需要用喚起支付，而現(xiàn)在則是把微信內(nèi)置到了微信的瀏覽器中。 目前正在寫一個(gè)微信公眾號(hào)的小項(xiàng)目，記錄一下遇到的問題和解決方法（主要是前端）。內(nèi)容持續(xù)更新中~ 主要實(shí)現(xiàn) 前后端分離前端為 SPA 單頁(yè)面使用微信的JSSDK微信支付 技術(shù)方案 后端使用 php ...

    afishhhhh 評(píng)論0 收藏0

  • 使用 vue2.0 開發(fā)微信公眾號(hào)下前后端分離的SPA站點(diǎn)的填坑之旅

    摘要：目前正在寫一個(gè)微信公眾號(hào)的小項(xiàng)目，記錄一下遇到的問題和解決方法主要是前端。前端提交時(shí)使用，在后端再取出對(duì)應(yīng)的微信支付看了下文檔，以前是需要用喚起支付，而現(xiàn)在則是把微信內(nèi)置到了微信的瀏覽器中。 目前正在寫一個(gè)微信公眾號(hào)的小項(xiàng)目，記錄一下遇到的問題和解決方法（主要是前端）。內(nèi)容持續(xù)更新中~ 主要實(shí)現(xiàn) 前后端分離前端為 SPA 單頁(yè)面使用微信的JSSDK微信支付 技術(shù)方案 后端使用 php ...

    Taonce 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<