web前端在手机上查看电脑上的项目（电脑请求的数据手机可以同步，可以热更新）

Posted 2021-07-18 老张在线敲代码

想必大家都知道一个很简便的方法，如下：

第一步手机给电脑共享热点

第二步电脑上面查看当前wifi的属性，找到ipv4地址并复制

第三步运行项目，在浏览器地址栏把localhost替换成复制的ipv4地址回车

第四步再次点击浏览器地址栏会出现二维码按钮，点击之后手机微信扫一扫就可以

这个方法虽然简便但是他只适合刚开始新手开发的静态页面，这个方法数据是请求不过来的而且也无法实现热更新。

那我们到底应该怎么弄呢，下面我给大家一个新的方法：
（软件实名认证要花俩块钱，网上找了好久就这个最便宜，软件我是免费提供给大家的，实名认证收费也不是我要收的，如果觉得贵或者是有更好的选择请绕道）
软件下载地址

下载完成之后确保自己手机跟电脑是同一个网络，然后先去注册一个账号并实名认证，成功之后点印射列表去新建印射具体内容如下

完成之后在编码器打开项目在全局新建一个名字为vue.config的文件夹在其下新建index.js（注意里面需要替换你的ipv4地址）

代码附上："use strict";
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require("path");

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {},

    // Various Dev Server settings
    //！！！这一块的地址是我更改后的ipv4地址，具体地址是多少根据你们的ipv4地址直接替换即可
    host: "192.168.171.202", //'127.0.0.1',//192.168.31.220 // 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-

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: "cheap-module-eval-source-map",

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true,
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, "../dist/index.html"),

    // Paths
    assetsRoot: path.resolve(__dirname, "../dist"),
    assetsSubDirectory: "static",
    assetsPublicPath: "/",

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: "#source-map",

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ["js", "css"],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report,
  },
};

然后复制下面图片的地址

复制完成之后打开编码器找到config.js将刚刚复制的地址粘贴过来替换即可

最后启动项目在手机浏览器中输入network地址就可以同步电脑的项目啦