有一些webpack开发服务器配置(它是整个配置的一部分):
config.devServer = {
contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'),
stats: {
modules: false,
cached: false,
colors: true,
chunk: false
},
proxy: [{
path: /^\/api\/(.*)/,
target: options.proxyApiTarget,
rewrite: rewriteUrl('/$1'),
changeOrigin: true
}]
};
function rewriteUrl(replacePath) {
return function (req, opt) { // gets called with request and proxy object
var queryIndex = req.url.indexOf('?');
var query = queryIndex >= 0 ? req.url.substr(queryIndex) : "";
req.url = req.path.replace(opt.path, replacePath) + query;
console.log("rewriting ", req.originalUrl, req.url);
};
}
我使用以下命令执行webpack:
node node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --history-api-fallback --debug --inline --progress --config config/webpack.app.dev.js
我可以使用http://localhost:8080
本地计算机访问开发服务器,但我也想通过移动平板电脑(它们位于同一Wi-Fi网络中)访问服务器。
如何启用它?谢谢!
它可能不是完美的解决方案,但我认为您可以为此使用ngrok。 Ngrok可以帮助您将本地Web服务器公开到Internet。您可以将ngrok指向本地开发服务器,然后将您的应用程序配置为使用ngrok URL。
例如,假设您的服务器在端口8080上运行。您可以使用ngrok通过运行将其暴露给外部世界
好消息
ngrok
是,它提供了公开URL 的更安全的https版本,您可以将该URL提供给世界上任何其他人以测试或展示您的作品。它还在命令中提供了许多自定义功能,例如设置用户友好的主机名,而不是在公开的url中设置随机字符串以及其他很多东西。
如果您只想打开网站来检查移动设备的响应能力,则应该使用browersync。