问题：在vue-cli2和vue-cli3中，如何在局域网通过IP访问项目？

最新推荐文章于 2024-06-24 11:03:14 发布

Amrice_

最新推荐文章于 2024-06-24 11:03:14 发布

阅读量969

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/Amrice_/article/details/115909118

版权

Vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何在局域网内通过IP地址使用PC和手机访问Vue-cli2和Vue-cli3项目的方法。对于Vue-cli2提供了两种修改配置的方式，而对于Vue-cli3则需要编辑vue.config.js文件来指定IP和端口。

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

遇到的问题：

在vue-cli2和vue-cli3中，如何在局域网通过IP，使用pc和手机访问项目呢？

解决方法：

一、vue-cli2

第一种方法：

找到 your-project/build/webpack.dev.conf.js

// const HOST = process.env.HOST
const HOST = '172.20.x.xx'

然后保存，重新启动一下服务，会发现 PC 地址栏已经变成：
http://172.20.x.xx:8080 了，然后用手机试一试，没问题。

第二种方法：

找到 your-project/package.json

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

在这句话里面添加参数 --host 0.0.0.0

"dev": "webpack-dev-server --inline --host 0.0.0.0 --progress --config build/webpack.dev.conf.js"

然后在 PC 地址栏输入：http://172.20.x.xx:8080 or localhost or 0.0.0.0 都可以访问，手机使用 IP 访问也是没问题。

二、vue-cli3

打开 vue.config.js这个文件，添加devServer这个对象。部分配置参数如下：

module.exports = {
    lintOnSave: false,
    devServer: {
        host: '172.20.1.103', // ip
        port: 8080, // 设置端口号
        https: false, // https:{type:Boolean}
        open: false, //配置自动启动浏览器
        proxy:null  //设置代理
    }
}

将 host 设置为你自己的需要的ip，prot 设置为你要使用的端口号。
重新启动项目npm run serve就可以啦！

注意：最后提醒大家，如果需要使用手机访问本地项目。那前提是：手机和电脑需要连同一个 wifi。