gulp browserSync proxy and webpack proxy

zeyu 发布于2019-08-21 14:53 / 2267人阅读

摘要：相当于通过本地服务代理请求到了启动服务将其他路由，全部返回

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");

// 相当于通过本地node服务代理请求到了http://cnodejs.org/api
var proxy = {
    "/api/*": {
            target: "https://cnodejs.org",
            secure: false
        }
}

//启动服务
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);

GPU云服务器云服务器 -proxy Proxy restlet proxy linux proxy

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88058.html

使用 Gulp 自动化构建工具快速搭建项目

摘要：通过本文，我们将学习如何使用来改变开发流程，从而使开发更加快速高效。中文网站详细入门教程使用是基于的，需要要安装为了确保依赖环境正确，我们先执行几个简单的命令检查。详尽使用参见官方文档，中文文档项目地址为了UED前端团队更好的协作开发同时提高项目编码质量，我们需要将Web前端使用工程化方式构建；目前需要一些简单的功能： 1. 压缩HTML 2. 检查JS 3. 编译SA...

glumes 2019-08-20 15:57 评论0 收藏0
从零开始创建 angularjs-gulp-es5 项目

摘要：为了动态插入新加的和文件且添加的文件有一定顺序，安装系列包。具体参见至此已经可以在本地愉快的开发了。配置编译任务开发完成以后代码需要上线，继续创建一些。有时间会加入校验添加，添加等等。。。源码地址：https://github.com/silence717/angular-gulp-seed 创建一个空文件夹名字任意，此项目为angular-gulp-seed mkdir angu...

hqman 2019-08-20 12:13 评论0 收藏0
从零开始创建 angularjs-gulp-es5 项目

摘要：为了动态插入新加的和文件且添加的文件有一定顺序，安装系列包。具体参见至此已经可以在本地愉快的开发了。配置编译任务开发完成以后代码需要上线，继续创建一些。有时间会加入校验添加，添加等等。。。源码地址：https://github.com/silence717/angular-gulp-seed 创建一个空文件夹名字任意，此项目为angular-gulp-seed mkdir angu...

hedzr 2019-08-01 15:56 评论0 收藏0
前端开发：实时刷新（及时预览）工具小汇总，兼有gulp+browser-sync设置方法

摘要：打开您的命令行工具，进入到目录下，运行以下其中一条命令。将创建一个本地服务器并自动打开你的浏览器后访问地址，这一切都会在命令行工具里显示。自己写标签：实时刷新、免F5、 gulp + browser-sync 开门见山，首先讲明一下本文的定位吧：写这篇文章是因为自己在平时的学习中，一次次试验了很多的前端实时刷新工具，有顺手的，有蹩脚的，有简单的，有麻烦的，安装完又折腾，折腾完又卸...

villainhr 2019-08-21 10:47 评论0 收藏0
实时编辑

摘要：静态服务器代理你的域名或注入通过流的方式创建任务流程这样您就可以在您的任务完成后调用，所有的浏览器将被告知的变化并实时更新因为只在乎您的在编译完成后注意后调用重载。方法一使用Google Chrome DevTools 方法二工作区Browsersync 安装 Node.js BrowserSync是基于Node.js的, 是一个Node模块，如果您想要快速使用它，也许您需要先...

wenshi11019 2019-08-23 15:34 评论0 收藏0