配置本地服务器
一：用node配置（確保有node）
1.?npm install http-server?
2.cd? 到指定目錄
3.http-server
二：webpack配置
1.在config里的index.js中
function getIPAdress(){ var interfaces = require('os').networkInterfaces(); for(var devName in interfaces){ var iface = interfaces[devName]; for(var i=0;i<iface.length;i++){ var alias = iface[i]; if(alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal){ console.log(alias.address) return alias.address; } } } } 2.在dev中host修改為如下 module.exports = { dev: {// Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {},
// Various Dev Server settings host: getIPAdress(), // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
三.gulp配置 1. //獲取當前ip const getIPAdress = (function(){ var interfaces = require('os').networkInterfaces(); for(var devName in interfaces){ var iface = interfaces[devName]; for(var i=0;i<iface.length;i++){ var alias = iface[i]; if(alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal){ console.log(alias.address) return alias.address; } } } })(); 2. // 服務器 gulp.task('server', function() { var BASEURL = command=='watchapi'?'https://api.bianla.cn/':"https://dev.bianla.cn/"; var BASEURL2 = command=='watchapi'?'https://apibbs.bianla.cn/':"https://devbbs.bianla.cn/"; browser.server({ host: getIPAdress, //地址，可不寫，不寫的話，默認localhost // port: 8000, //端口號，可不寫，默認8000 root: `${pathObj.path}/test`, //當前項目主目錄 livereload: true, //自動刷新 middleware:function(connect,opt){ return [proxy('/APIBIANLA',{ target:BASEURL, changeOrigin:true, pathRewrite:{"/APIBIANLA" :BASEURL} }), proxy('/APIBBSBIANLA',{ target:BASEURL2, changeOrigin:true, pathRewrite:{"/APIBBSBIANLA" :BASEURL2} })] } }); }); 3. gulp.task('watch',['server'],()=>{ gulp.watch(`${pathObj.path}/dev/lib/*.js`,['js']); gulp.watch([`${path.resolve("../")}/assets/js/*.js`,`${path.resolve("../")}/assets/styles/*.less`],['common']); gulp.watch(`${pathObj.path}/dev/styles/*.less`,['less']); gulp.watch([`${pathObj.path}/dev/*.html`,`${pathObj.path}/dev/template/**/*.html`],['html']); });
轉載于:https://www.cnblogs.com/miaSlady/p/9997787.html
總結
