当前位置: 首页 > Web前端 > vue.js

你真的会用devServer配置项吗?

时间:2023-04-01 11:06:57 vue.js

devServer可以通过webpack-dev-server的这些配置以多种方式改变它的行为。下面是一个基本示例,将dist/目录中的所有内容gzip并在本地提供服务:devServer:{contentBase:path.join(__dirname,"dist"),compress:true,port:9000}ParameterdescriptiondevServer:{//Providestaticfiledirectoryaddress//基于express.static实现contentBase:path.join(__dirname,"dist"),//当这个配置设置为true时,将跳过主机检查。不建议这样做,因为不检查主机的应用程序容易受到DNS重新绑定攻击启用惰性,开发服务器仅在请求时编译包。这意味着webpack不会监视任何文件更改。我们称之为“惰性模式”lazy:true,//任何404响应都被index.html代替//基于节点connect-history-api-fallback包,historyApiFallback:true,//所有服务是否启用gzip压缩//基于节点压缩包实现compress:true,//是否隐藏bundle信息noInfo:true,//出错时是否覆盖页面overlay:true,//是否开启热加载//必须结合webpack.HotModuleReplacementPlugin完成EnableHMRs。//如果webpack或webpack-dev-server以--hot选项启动,那么这个插件会自动添加hot:true,//热加载模式//true表示内联模式,false表示iframe模式inline:true,//默认为true//是否自动开启open:true,//设置本地url和端口号host:'localhost',port:8080,//Proxy//基于节点实现代理http-proxy-middleware包:{//匹配api前缀时,会代理到3001端口//即http://localhost:8080/api/123=http://localhost:3001/api/123//注意:这里是代理当前server8080到3001,而不是将任何端口的api代理到3001'/api':'http://localhost:3001',//设置为true,一个虚拟服务器会接收你的请求并发送到你的代表//主要解决跨域问题changeOrigin:true,//forproxyhttpssecure:false,//overridepath:http://localhost:8080/api/123=http://localhost:3001/123pathRewrite:{'^/api':''},//输出日志信息这个代理请求绕过的rmation:function(req,res,proxyOptions){console.log(proxyOptions.target)}}}哈哈哈哈哈哈哈,看到这个你应该想知道更多,其实官方文档我都有