【vue-cli】vue-cli+webpack配置下局域网，手机无法访问绑定ip的vue项目

最新推荐文章于 2023-05-17 18:27:43 发布

原创最新推荐文章于 2023-05-17 18:27:43 发布 · 6.7k 阅读

3 ·

CC 4.0 BY-SA版权

前端那些事同时被 3 个专栏收录

54 篇文章

订阅专栏

前端效果

40 篇文章

订阅专栏

vue

17 篇文章

订阅专栏

本文介绍了解决Vue项目在手机浏览器上无法访问的问题的方法，包括配置devServer、检查网络连通性和修改package.json文件等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://192.168.0.104:8080/#/ 访问我的vue项目，浏览器可以打开，手机无法打开，在同一局域网段下。

1.设置config文件下的index.js文件：

 dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: '192.168.0.104', // 也可以设置为0.0.0.0 
    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-
    
    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: true,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

    /**
     * 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
  },

如果手机还是无法访问，请：

1.电脑cmd ping手机ip，是否能通。

不能通，好吧，那就

1).把防火墙关闭试试

2).手机和电脑要用同一个wifi,然后打开cmd, ipconfig 看下ip是什么，把这个本机的192.168.0.102换掉，端口号仍然需要的，然后在手机端浏览器中输入新的地址

3).关闭路由器的ap隔离

4).电脑弄代理，在手机的wifi里手动把代理服务器的地址设置好

OK，如果还是不能通，那就vue项目里边的package.json打开：

 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --port 8080 --host 192.168.0.104",

加上粗线的东东，

OK，还不行，翻一翻webpack的配置吧。

附上一个webpack解决此问题的连接：https://github.com/webpack/webpack-dev-server/issues/147