测试环境中A机器(192.168.3.5)装有redis。B机器(192.168.3.102)需要访问A机的redis.
 
找到redis.windows.conf配置文件
 
1、将protected-mode 参数改为no。
 
2、注释掉bind 127.0.0.1
 
3、重启redis服务
 
一般情况是可以解决。但是在我的机器上居然不靠谱了，redis服务居然无法启动。一番折腾后发现第二步注释掉的代码更改为bind 0.0.0.0即可完美解决。
 

在vue项目npm run dev运行之后，会提示我们使用localhost:8081访问
 
 但是有时候我们需要在手机上查看显示效果，就需要在同一个局域网下使用ip替代localhost，但是直接写ip是不行的，我们需要配置一下dev的执行，在package.json中添加代码：
 
 然后就可以通过IP地址访问项目了

 

  
 
 
如何用ip访问web服务器
 

  
 
 
Usually, we just type in the address of a website we want to view, but would a web server actually “know” if we used the direct IP address instead? Today’s SuperUser Q&A post has the answer to a confused reader’s question.
 
 
 通常，我们只键入要查看的网站的地址，但是Web服务器实际上会“知道”是否使用直接IP地址吗？ 今天的“超级用户问答”帖子回答了一个困惑的读者的问题。 
 
 
Today’s Question & Answer session comes to us courtesy of SuperUser—a subdivision of Stack Exchange, a community-driven grouping of Q&A web sites.
 
 
 今天的“问答”环节由SuperUser提供，它是Stack Exchange的一个分支，该社区是由社区驱动的Q＆A网站分组。 
 
 
Photo courtesy of Cory M. Grenier (Flickr).
 
 
 图片由Cory M. Grenier(Flickr)提供 。 
 
 
 问题 (The Question)
 
 
SuperUser reader Joseph A. wants to know how web servers can tell if you are using direct IP address access or not:
 
 
 超级用户读者Joseph A.想知道Web服务器如何判断您是否正在使用直接IP地址访问： 
 
 

  
Some web servers, when accessed using their IP address, return an error that direct IP address access is not allowed. I have been wondering for some time how this works.
 
  
 某些Web服务器在使用其IP地址进行访问时，返回错误，指示不允许直接IP地址访问。 我一直想知道它是如何工作的。 
 
  
Does a browser always resolve the IP address and connect to it? Direct IP address access is just skipping DNS altogether, right? How does a remote server even know that you skipped DNS?
  
 浏览器是否总是解析IP地址并连接到它？ 直接IP地址访问只是完全跳过DNS，对吗？ 远程服务器甚至如何知道您跳过了DNS？ 
 
 
 
How do web servers know if you are using direct IP address access or not?
 
 
 Web服务器如何知道您是否正在使用直接IP地址访问？ 
 
 
 答案 (The Answer)
 
 
SuperUser contributor iAdjunct has the answer for us:
 
 
 超级用户贡献者iAdjunct为我们提供了答案： 
 
 

  
To answer your question of how it knows, it has to do with what your browser sends the web server. You are right that the system always resolves it to an IP address, but the browser sends the URL you attempted to access in the HTTP header.
 
  
 要回答有关它的信息的问题，它与浏览器发送Web服务器的内容有关。 没错，系统总是将其解析为IP地址，但浏览器会在HTTP标头中发送您尝试访问的URL。 
 
  
Here is a sample header that I found online, modified to look as though you used Firefox on Windows and typed apple.com into the address bar:
 
  
 这是我在网上找到的示例标头，经过修改后看起来就像您在Windows上使用Firefox，并在地址栏中输入apple.com一样： 
 
  

   
  
  
Here is what the header would look like if you used its IP address:
 
  
 如果您使用IP地址，则标题如下所示： 
 
  

   
  
  
Both of these would be sent to the same IP address over a socket, but the browser tells the web server what it accessed. Why? Because web servers with the same IP address may host multiple websites and give different pages for each. It cannot distinguish who wants which page by IP address because they all have the same one, but it can distinguish them by the HTTP header.
  
 两者都将通过套接字发送到相同的IP地址，但是浏览器告诉Web服务器它访问了什么。 为什么？ 因为具有相同IP地址的Web服务器可能托管多个网站，并为每个网站提供不同的页面。 它不能通过IP地址来区分谁想要哪个页面，因为它们都具有相同的页面，但是可以通过HTTP标头来区分它们。 
 
 
 
 
 
 
 
Have something to add to the explanation? Sound off in the comments. Want to read more answers from other tech-savvy Stack Exchange users? Check out the full discussion thread here.
 
 
 有什么补充说明吗？ 在评论中听起来不错。 是否想从其他精通Stack Exchange的用户那里获得更多答案？ 在此处查看完整的讨论线程 。 
 
 

  
翻译自: https://www.howtogeek.com/254097/how-do-web-servers-know-if-you-are-using-direct-ip-address-access-or-not/
 
 
如何用ip访问web服务器

 
 
想要实现下图效果
 
 
 
修改<projectDir>\config\index文件的host为’0.0.0.0’
 
 
'use strict'
const path = require('path')
module.exports = {
  dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    // host: require('ip').address(),
    host: '0.0.0.0',
    port: 8080,
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false,
    useEslint: true,
    showEslintErrorsInOverlay: false,
    devtool: 'cheap-module-eval-source-map',
    cacheBusting: true,
    cssSourceMap: true
  },
  devServer: {},
  build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true,
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

 
 
 
这一步修改为了使localhost可以访问项目
 
 
修改<projectDir>\build\webpack.dev.conf.js的compilationSuccessInfo的messages属性
 
 
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      process.env.PORT = port
      devWebpackConfig.devServer.port = port
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
        // 修改这里
          messages: [
            `App runing at: `,
            `Local: http://localhost:${port}`,
            `Network: http://${require('ip').address()}:${port}`,
          ],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

 
 
 
这一步修改终端提示内容