配置本地服务器

Posted 2021-01-21 米牙

一：用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‘]);

});