Vue.js - 通过手机访问vue.js项目

2018-06-28 发布：hangge 阅读：1431

1，问题描述

（1）在 Vue.js 开发时少不了使用 webpack 进行编译打包。当 Vue 项目搭建好后，只要执行“npm run dev”命令，webpack 便会自动启动个 Web 服务，然后使用浏览器就可以访问了，默认地址为：127.0.0.1:8080

（2）但有时想要通过手机来看下效果（假设本机的 IP 为 192.168.1.100），虽然手机与 PC 在同一个局域网内，但直接访问这个 IP 是无效的（使用局域网内的其他电脑也一样）。

2，解决办法

（1）修改项目 config 文件夹下的 index.js 文件，将 host 改成 0.0.0.0

module.exports = {
  dev: {

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

    // Various Dev Server settings
    host: '0.0.0.0',  //原来是 localhost
    port: 8080,
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,

（2）重启服务后手机就能通过 PC 端的 IP 访问项目了。