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

Leck1e 發(fā)布于2019-08-21 16:40 / 1451人閱讀

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

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

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

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

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

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

可以通過本地配置nginx做代理來處理跨域，但是作為一個前端來說，學習成本略高，

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

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"), // 編譯輸出的靜態(tài)資源路徑
    assetsSubDirectory: "static", // 編譯輸出的二級目錄
    assetsPublicPath: "./", // 編譯發(fā)布的根目錄，可配置為資源服務(wù)器域名或 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"), // 編譯輸出的靜態(tài)資源路徑
    assetsSubDirectory: "static", // 編譯輸出的二級目錄
    assetsPublicPath: "./",// 編譯發(fā)布的根目錄，可配置為資源服務(wù)器域名或 CDN 域名
    productionSourceMap: false, // 是否開啟 cssSourceMap
    productionGzip: false, // 是否開啟 gzip
    productionGzipExtensions: ["js", "css"], // 需要使用 gzip 壓縮的文件擴展名
    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", // 編譯輸出的二級目錄
    assetsPublicPath: "./",// 編譯發(fā)布的根目錄，可配置為資源服務(wù)器域名或 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": { /* 當發(fā)生跨域請求是調(diào)用此接口 本地代理*/
        target: "https://api.douban.com/v2/event/list?loc=108288&start=1&count=3",
        changeOrigin: true,
        pathRewrite: {
          "^/baseUrl": ""
        }
      },
    },
    cssSourceMap: false
  }
}

在使用的時候

get () { // 開發(fā)環(huán)境跨域時調(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)用不同的接口，具體看這里我的項目中一共四個環(huán)境

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

項目地址在這里

云服務(wù)器 GPU云服務(wù)器 PHP開發(fā)微信支付小程序開發(fā)微信免費開發(fā)微信小程序哪里開發(fā)微信小程序

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88597.html

發(fā)表評論

登陸后可評論

0條評論

Leck1e

男|高級講師

我要關(guān)注我要私信

TA的文章

word2vec

閱讀 1550·2023-04-26 02:08
身價過億的女王對小碼農(nóng)說中斷會了嗎

閱讀 3139·2021-10-14 09:42
域名中的主機名是什么-網(wǎng)址的主機名是什么？

閱讀 7230·2021-09-22 15:34
CSS-在`有限寬度的`父級內(nèi)部時，創(chuàng)建一個`全瀏覽器寬度`的容器

閱讀 3250·2019-08-30 13:16
(00)00-7F字符編碼對照表

閱讀 2751·2019-08-26 13:49
這兒有一個使你網(wǎng)頁性能提升10倍的工具

閱讀 1355·2019-08-26 11:59
用JavaScript來計算兩個圖像的相似度

閱讀 1286·2019-08-26 10:31
一文讀懂JSONP原理

閱讀 2178·2019-08-23 17:19

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

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

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

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

**使用 vue2.0 開發(fā)微信公眾號下前后端分離的SPA站點的填坑之旅**

**使用 vue2.0 開發(fā)微信公眾號下前后端分離的SPA站點的填坑之旅**

發(fā)表評論

0條評論

Leck1e

男|高級講師

TA的文章

word2vec

身價過億的女王對小碼農(nóng)說中斷會了嗎

域名中的主機名是什么-網(wǎng)址的主機名是什么？

CSS-在`有限寬度的`父級內(nèi)部時，創(chuàng)建一個`全瀏覽器寬度`的容器

(00)00-7F字符編碼對照表

這兒有一個使你網(wǎng)頁性能提升10倍的工具

用JavaScript來計算兩個圖像的相似度

一文讀懂JSONP原理

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！