初始化新建vue-cli项目，用本地ip预览的方法

最新推荐文章于 2024-02-21 09:44:58 发布
最新推荐文章于 2024-02-21 09:44:58 发布
阅读量280 收藏
点赞数
分类专栏： vue iview javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lemisi/article/details/86489130
版权
javascript 同时被 3 个专栏收录
29 篇文章 0 订阅
订阅专栏
vue
22 篇文章 0 订阅
订阅专栏
html
13 篇文章 0 订阅
订阅专栏

新建的vue-cli项目，不想使用http://localhost:8080/#/，想用本地ip地址预览的2个方法:

1、在json文件中，的dev项中：添加 --host 0.0.0.0

2、在config目录下的index.js的host改成0.0.0.0

明月别枝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 自动获取本地ip，并打开浏览器
主要分享大数据相关的知识，如Spark、Hudi
05-29 6562
前言 功能如题，本文参考：https://www.jianshu.com/p/54daac2cc924，目的只是为了把网上查的资料做个笔记~ 以下均为vue cli2 创建的项目 自动打开浏览器 只需要在config/index.js里找到autoOpenBrowser将其设为true即可 获取本地ip 方法一 在config/index.js 顶部添加 const os = require(...
cli3暴露api地址 vue_vue cli3-cli4 本地反代解决本地调试线上api跨域问题 proxy
weixin_34382844的博客
12-24 241
跨域一直是很烦人问题，不过好现在现在跨域，大部分都是肛后端，后端设置CORS信息即可。但是也有少部分，可能前端能完成的事前端搞定就行了，懒得麻烦后端，这种情况一般都是进行反代。使用场景后端提供了一个在线api地址，但是该地址段和本地localhost不在同一域名下，所以产生了跨域。配置反代 proxy这种情况，我们的vue-cli提供了一个很好的功能，反代。首先我们需要找到vue cli的配置文件...
vue-cli5 proxy反代查看真实路径
个人博客
08-08 2396
我们在node_modules/http-proxy-middleware/dist/http-proxy-middleware.js中的prepareProxyRequest方法中的。但是我在配置之后并没有任何日志打印在控制台。按道理源码中this.logger.debug方法应该要打印，但是它没有生效。修改源码这种方式很不推荐，因为只能在自己本地使用，而且一旦更新包就需要重新修改，还是安心等待官方进行处理吧。但是通过阅读源码发现，外面可以手动在源码中加入调试语句，不过并不推荐，仅作本地临时调试使用。..
PHP cli获取当前服务器ip地址
xkjscm的博客
06-17 1476
网上很多用法都试过，不行的。 有的用ifconfig，但是有的Linux系统默认是不安装ifconfig的，但是ip a是有的。下面我们用ip a来获取服务器ip地址 命令 ip a 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000 link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00 i
vue项目 使用手机预览
最新发布
Web_Notes的博客
02-21 527
手机预览vue项目
vue项目根据ip地址在手机中预览
小耳朵晨晨
12-13 417
1.找到config目录下的index.js文件。 2.找到host，把localhost改成0.0.0.0 3.重启项目，将端口号前的地址改成本机ip地址， (查看本机ip: 运行cmd ，命令ip config)。 这个地址生成的二维码就可以通过手机端的扫一扫功能进入页面啦。 ...
vue-cli项目无法用本机IP访问的解决方法
12-11
启动vue-cli项目服务，用本机IP无法访问此网站，拒绝了我们的链接请求。从而无法从手机上预览效果 原因分析 在我们的bulid目录下有一个webpack.dev.config.js的配置文件，发现devServer对象里的host属性取自process....
vue-cli初始化项目中使用less的方法
10-18
vue-cli 是 vue.js 的脚手架工具，可以帮助我们编写基础代码、快速搭建开发环境。下面这篇文章主要给大家介绍了关于vue-cli初始化项目中使用less的相关资料，需要的朋友可以参考借鉴，下面随着小编来一起看看吧
详解使用vue-cli脚手架初始化Vue项目下的项目结构
08-27
详解使用vue-cli脚手架初始化Vue项目下的项目结构 在本文中，我们将详细介绍使用vue-cli脚手架初始化Vue项目下的项目结构。vue-cli是Vue提供的一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用...
使用electron将vue-cli项目打包成exe的方法
01-21
如果你已经做好了一个vue的项目，并且想要将他打包成exe,那么请继续阅读。 首先你可以下载一个demo了解一下。 git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install ...
vue-cli3项目升级到vue-cli4 的方法总结
10-15
主要介绍了vue-cli3项目升级到vue-cli4 的方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue init webpack myproject构建项目 ip不能访问
Super灬LV
12-08 1396
问题vue init webpack myproject构建项目 使用localhost 或者127.0.0.1 均可以正常访问，但是切换到本地ip就不行了解决方式在 webpack.dev.conf.js 追加以下代码const HOST = process.env.HOST || '0.0.0.0';重新启动npm run dev重新打开即可
vue-cli启动本地服务，局域网下通过ip访问不到的原因
weixin_30824599的博客
01-22 581
1.问题描述： 新开发了一个vue-cli项目，想通过手机查看效果，发现访问不到，ip地址和端口号都没错但是手机访问不到，在本机电脑浏览器输入ip端口号一样访问不到，只能通过localhost:8080访问到，同一局域网下其他的手机和电脑并不能通过ip地址访问调试， 2.原因：vue-cli项目是通过命令行一键生成的，配置文件中默认生成的是本地调试模式，默认访问地址是local...
vue-cli proxy代理
包磊磊的博客
03-26 2126
config/index.js下'use strict'// Template version: 1.3.1// see http://vuejs-templates.github.io/webpack for documentation.const path = require('path')function proxy() { return { target: '目标网站', c...
Vue-项目通过本地ip访问
qq_41709082的博客
12-16 725
Vue项目通过本地ip访问 1.修改package.json文件： 将：“dev”: “webpack-dev-server --inline --progress --config build/webpack.dev.conf.js”, 替换成： “dev”: “webpack-dev-server --open --hot --host 0.0.0.0 --inline --progress ...
vue项目在使用ip地址加端口号不能访问时
weixin_43756060的博客
02-21 2944
修改package.json文件的scripts属性下的dev属性 加上–host 0.0.0.0后再重启服务器 "scripts": { "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev...
解决VUE项目不兼容IE浏览器问题
热门推荐
qq_30966497的博客
10-11 1万+
非常简单，只需要两步就能解决： 1、 安装插件babel-polyfill        npm install --save-dev babel-polyfill    2、在你的VUE项目的src目录下找到main.js      添加下面一行代码：      import 'babel-polyfill' 最后，重新打开浏览器，应该就能兼容打开页面了。...
vue-cli-webpack:vue-cli 2.9.6版本初始化webpack工程
09-07
vue-cli是一个构建Vue.js工程的脚手架工具，帮助开发者快速搭建和管理Vue.js项目。而vue-cli 2.9.6版本是其一个较早的版本，可以使用它来初始化一个基于webpack的Vue.js工程。 使用vue-cli 2.9.6版本初始化webpack工程，首先需要确保本地已安装了node.js和npm。 在命令行中执行以下命令来安装vue-cli： ``` npm install -g vue-cli@2.9.6 ``` 安装完成后，可以使用以下命令来初始化一个webpack工程： ``` vue init webpack my-project ``` 这里的"my-project"是你自定义的项目名称，可以替换为其他名称。 执行上述命令后，vue-cli会根据webpack模板生成项目的基本结构和文件。 接着，需要进入项目文件夹： ``` cd my-project ``` 然后执行以下命令来安装项目所需的依赖： ``` npm install ``` 安装完成后，可以使用以下命令来启动项目： ``` npm run dev ``` 这样，webpack工程就成功初始化并启动了。通过访问http://localhost:8080，可以在浏览器中查看项目的运行效果。 在初始化的工程中，可以编辑和修改src目录下的文件，这里的主要文件包括App.vue和main.js，分别是Vue组件和入口文件。 总之，使用vue-cli 2.9.6版本初始化webpack工程能够为开发者提供一个基于webpack的Vue.js开发环境，使他们能够更高效地进行Vue.js项目的开发和管理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值