让别人访问本地运行的vue项目

1. 修改vue项目中config文件下的index.js

将host: "localhost" 改为 host: "0, 0, 0, 0"

2. window R输入cmd调出控制台

在控制台中输入 ipconfig 找到电脑的IP地址

3. 在控制面板中搜索防火墙并关闭防火墙

然后其他人就可以通过你的ip地址 端口号访问了。

本来你是localhost:8080这样的。现在改成192.1.2.3:8080就行了 

注意:需要在同一网络环境下进行访问,例如,连同一个wifi,或者连接同一个路由器的宽带

本地运行打包后的vue项目

打包测试(搭建服务器)

打包后的代码必须放在服务器下才能运行,直接双击index.html是不行的。

下面介绍一种利用node.js的 http-server搭建一个简单的http服务器:那么什么是http-server呢?http-server是一个基于node.js的简单的,零配置的命令行http服务器。

(1) 安装

既然是基于node的,首先必须安装node.js,这个略过不谈。全局安装 http-server,这样就可以在任意一个本地项目中使用了。

npm install http-server -g

(2) 使用

http-server [path] [options]

path选项说明

如果指定path,即为指定的路径,如果不指定,即为当前所在文件路径。强烈建议直接在vue-cli打包后的dist文件夹下打开命令行,这样就不用再指定文件路径了。或者直接指定路径为dist

http-server ./dist

options选项说明

下面介绍几个常用的:

  • -p 要使用的端口(默认为8080);
  • -o 启动服务器后打开浏览器窗口;
  • -P 或 --proxy代理不能在本地解析给定的url的所有请求;
  • -S 或 --ssl启用https;

http-server默认启用8080端口,但是这个端口容易和电脑中的某些任务冲突,强烈建议利用-p 端口号指定一个新的端口。如果你想同时开启两个项目,则两个项目必须指定不同的端口号,否则有一个项目是打不开的。

你的项目的请求接口是跨域的,不能直接访问。如何解决跨域这个问题呢?添加-P 域名地址即可。这个P是大写的,上面端口那个p是小写的。请注意区分!

例如,我的启动服务器的命令即:

http-server -p 8081 -o -P http://www.baidu.com

(3) 注意

按照正常情况来说,这时会自动打开浏览器,渲染出你的项目。可是,在打包测试时,还发现了一些其他问题。

1.有时候打包运行时发现一片空白,这可能就是打包后的css/js的引入问题了。默认的引入方式是绝对路径方式。我们希望是相对路径,可以把config/index.js中的assetsPublicPath: ‘/’,改为assetsPublicPath: ‘./’,这样再打包出来的就是相对路径了。

assetsPublicPath: '/',  // 绝对路径
assetsPublicPath: './', // 相对路径

2.运行打包后的项目时,在非首页页面刷新时直接404,如果你的项目出现这个问题,那么你的router中一定是把mode定义为history了。定义hash模式则不会出这个问题。难道只能用很丑的hash?当然不是,其实vue-router官方文档的HTML5 History 模式对此已有说明,这个就需要后端的帮我们设置一下了。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。

如何让别人访问本地运行的vue项目的更多相关文章

  1. android – 在Google Play的Billing API v3中解决耗材的API购买逻辑缺陷(与使用API​​ v3的消耗品的每个人相关)

    )添加到GooglePlay并将第一个列表中的第2步更改为:可以非常轻松地解决此问题:>使用购买ID作为开发人员有效负载,使用getBuyIntent为集合中的下一个可用SKU启动购买流程.关于黑客行为的说明:>通过FreedomAPK或类似产品完成虚假购买:这些应用程序基本上冒充GooglePlay商店完成购买.要检测它们,需要在购买收据中包含verifythesignature并拒绝未通过支票的购买,大多数应用程序都不会这样做.大多数情况下问题解决了.>通过GameKiller或类似方式

  2. android – 在Mac上查看本地网络服务器,具有计算机名称,而不是IP

    解决方法简而言之,没有Android设备将无法通过.local地址默认访问您的Mac.OnMacs,“本地”通常会通过mDNS来解决.Android操作系统没有对mDNS的内置支持.Android通过标准DNS解析域名,除非您运行自己的本地DNS服务器,否则不会解析您的本地网络地址.Android设备要么使用ISP的DNS服务器,要么转发到ISP的路由器DNS服务器.

  3. 基于win2003虚拟机中apache服务器的访问

    下面小编就为大家带来一篇基于win2003虚拟机中apache服务器的访问。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. Android本地存储方法浅析介绍

    这篇文章主要介绍了Android本地存储案例,方法简单可以实现存储并达到节省内存的效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧

  5. 调用WordPress函数统计文章访问量及PHP原生计数器的实现

    这篇文章主要介绍了调用WordPress函数统计文章访问量及PHP原生计数器的实现,文中作者也提到了WordPress中的两款插件不过出于性能考虑并不推荐插件方式的实现,需要的朋友可以参考下

  6. vue如何在多个不同服务器下访问不同地址

    这篇文章主要介绍了vue如何在多个不同服务器下访问不同地址,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  7. 基于Python实现批量保存视频到本地

    我们刷视频时常常会想把精彩的视频保存到本地,如果少数的还行,如果有很多的话一个个保存太麻烦了。本文教你如何用Python实现视频批量保存到本地,需要的可以参考一下

  8. 第六节 访问属性和方法 [6]

    第四节中介绍了如何调用函数.对于对象的成员来是这样调用的:如果你需要在运行时确定变量的名称,你可以用$this->$Property这样的表达式.如果你想调用方法,可以用$obj->$method().你也可以用->运算符来返回一个函数的值,这在PHP以前的版本中是不允许的.例如,你可以写一个像这样的表达式:$obj->getObject()->callMethod().这样避免了使用一个中间变量,也有助于实现某些设计模式,如Factory模式。

  9. 不能通过IP地址访问VUE项目的问题及解决

    这篇文章主要介绍了不能通过IP地址访问VUE项目的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  10. 用连接池提高Servlet访问数据库的效率(2)

    所有的可用连接对象均登记在名为freeConnections的向量中。如果向量中有多于一个的连接,getConnection()总是选取第一个。如果在向量freeConnections中不存在任何可用连接,getConnection()方法检查是否已经指定最大连接数限制。DriverManager将使用指定的JDBCURL确定适合于目标数据库的驱动程序及建立连接。许多Servlet引擎为实现安全关闭提供多种方法。即,该计数代表引用DBConnectionManager唯一实例的客户程序总数,它将被用于控制

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部