gulp browserSync proxy and webpack proxy

zeyu 發(fā)布于2019-08-21 14:53 / 2272人閱讀

摘要：相當(dāng)于通過(guò)本地服務(wù)代理請(qǐng)求到了啟動(dòng)服務(wù)將其他路由，全部返回

1.gulp browserSync proxy

var url = require("url");
var proxy = require("proxy-middlewre");

var proxyOptions = url.parse("http://192.168.85.201:3000");
    proxyOptions.route = "/api";
    // requests to `http://192.168.85.201:8000/api/login` are proxied to `http://192.168.85.201:3000/login`

    browserSync.init({
        server: {
            baseDir: "./",
            directory: true,
            middleware: [proxy(proxyOptions)]
        }
    });

2.webpack proxy

var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var config = require("./build/webpack.config");

// 相當(dāng)于通過(guò)本地node服務(wù)代理請(qǐng)求到了http://cnodejs.org/api
var proxy = {
    "/api/*": {
            target: "https://cnodejs.org",
            secure: false
        }
}

//啟動(dòng)服務(wù)
var server = new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    proxy: proxy,
    stats: {
        colors: require("supports-color")
    },
});

//將其他路由，全部返回index.html
server.app.get("*", function (req, res) {
    res.sendFile(__dirname + "/index.html")
});

server.listen(9999);

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

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

相關(guān)文章

使用 Gulp 自動(dòng)化構(gòu)建工具快速搭建項(xiàng)目

摘要：通過(guò)本文，我們將學(xué)習(xí)如何使用來(lái)改變開發(fā)流程，從而使開發(fā)更加快速高效。中文網(wǎng)站詳細(xì)入門教程使用是基于的，需要要安裝為了確保依賴環(huán)境正確，我們先執(zhí)行幾個(gè)簡(jiǎn)單的命令檢查。詳盡使用參見(jiàn)官方文檔，中文文檔項(xiàng)目地址為了UED前端團(tuán)隊(duì)更好的協(xié)作開發(fā)同時(shí)提高項(xiàng)目編碼質(zhì)量，我們需要將Web前端使用工程化方式構(gòu)建；目前需要一些簡(jiǎn)單的功能： 1. 壓縮HTML 2. 檢查JS 3. 編譯SA...

glumes 2019-08-20 15:57 評(píng)論0 收藏0
從零開始創(chuàng)建 angularjs-gulp-es5 項(xiàng)目

摘要：為了動(dòng)態(tài)插入新加的和文件且添加的文件有一定順序，安裝系列包。具體參見(jiàn)至此已經(jīng)可以在本地愉快的開發(fā)了。配置編譯任務(wù)開發(fā)完成以后代碼需要上線，繼續(xù)創(chuàng)建一些。有時(shí)間會(huì)加入校驗(yàn)添加，添加等等。。。源碼地址：https://github.com/silence717/angular-gulp-seed 創(chuàng)建一個(gè)空文件夾名字任意，此項(xiàng)目為angular-gulp-seed mkdir angu...

hqman 2019-08-20 12:13 評(píng)論0 收藏0
從零開始創(chuàng)建 angularjs-gulp-es5 項(xiàng)目

摘要：為了動(dòng)態(tài)插入新加的和文件且添加的文件有一定順序，安裝系列包。具體參見(jiàn)至此已經(jīng)可以在本地愉快的開發(fā)了。配置編譯任務(wù)開發(fā)完成以后代碼需要上線，繼續(xù)創(chuàng)建一些。有時(shí)間會(huì)加入校驗(yàn)添加，添加等等。。。源碼地址：https://github.com/silence717/angular-gulp-seed 創(chuàng)建一個(gè)空文件夾名字任意，此項(xiàng)目為angular-gulp-seed mkdir angu...

hedzr 2019-08-01 15:56 評(píng)論0 收藏0
前端開發(fā)：實(shí)時(shí)刷新（及時(shí)預(yù)覽）工具小匯總，兼有gulp+browser-sync設(shè)置方法

摘要：打開您的命令行工具，進(jìn)入到目錄下，運(yùn)行以下其中一條命令。將創(chuàng)建一個(gè)本地服務(wù)器并自動(dòng)打開你的瀏覽器后訪問(wèn)地址，這一切都會(huì)在命令行工具里顯示。自己寫標(biāo)簽：實(shí)時(shí)刷新、免F5、 gulp + browser-sync 開門見(jiàn)山，首先講明一下本文的定位吧：寫這篇文章是因?yàn)樽约涸谄綍r(shí)的學(xué)習(xí)中，一次次試驗(yàn)了很多的前端實(shí)時(shí)刷新工具，有順手的，有蹩腳的，有簡(jiǎn)單的，有麻煩的，安裝完又折騰，折騰完又卸...

villainhr 2019-08-21 10:47 評(píng)論0 收藏0
實(shí)時(shí)編輯

摘要：靜態(tài)服務(wù)器代理你的域名或注入通過(guò)流的方式創(chuàng)建任務(wù)流程這樣您就可以在您的任務(wù)完成后調(diào)用，所有的瀏覽器將被告知的變化并實(shí)時(shí)更新因?yàn)橹辉诤跄脑诰幾g完成后注意后調(diào)用重載。方法一使用Google Chrome DevTools 方法二工作區(qū)Browsersync 安裝 Node.js BrowserSync是基于Node.js的, 是一個(gè)Node模塊，如果您想要快速使用它，也許您需要先...

wenshi11019 2019-08-23 15:34 評(píng)論0 收藏0