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

最新推荐文章于 2024-01-16 14:42:58 发布
最新推荐文章于 2024-01-16 14:42:58 发布
阅读量295 收藏
点赞数
分类专栏： 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

明月别枝
关注
专栏目录
vue 启动带ip_配置vue项目实现localhost本地访问和ip访问且设置启动后终端显示
weixin_33462167的博客
01-13 3017
配置vue项目实现localhost本地访问和ip访问且设置启动后终端显示配置vue项目实现localhost本地访问和ip访问且设置启动后终端显示localhost和network访问地址1、首先设置localhost和本地ip访问在config文件下的index.js文件中，修改host为：host: '0.0.0.0'，或者在package.json文件下"scripts"的"dev"值后新...
Vue全家桶之前端工程化（模块化、Webpack、Vue-cli脚手架、Element-UI）
huohuoit的博客
05-08 730
1. 模块化相关规范 1.1 模块化概述 1.1.1传统开发模式的主要问题 ① 命名冲突 ② 文件依赖 通过模块化解决上述问题：  模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成 员，也可以依赖别的模块  模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护 1.2 浏览器端模块...
vue项目根据ip地址在手机中预览
小耳朵晨晨
12-13 431
1.找到config目录下的index.js文件。 2.找到host，把localhost改成0.0.0.0 3.重启项目，将端口号前的地址改成本机ip地址， (查看本机ip: 运行cmd ，命令ip config)。 这个地址生成的二维码就可以通过手机端的扫一扫功能进入页面啦。 ...
vue项目通过本地IP地址访问，不是localhost
a5252145的博客
08-02 3131
vue项目通过本地IP地址访问，不是localhost 修改package.json中scripts属性，再dev属性下添加：--host 192.168.3.45即可。
配置vue项目实现localhost本地访问和ip访问且设置启动后终端显示localhost和network访问地址
热门推荐
qq_41497443的博客
09-14 2万+
配置vue项目实现localhost本地访问和ip访问且设置启动后终端显示localhost和network访问地址 1、首先设置localhost和本地ip访问 在config文件下的index.js文件中，修改host为： host: '0.0.0.0'， 或者在package.json文件下"scripts"的"dev"值后新增–host 0.0.0.0"，即： "dev": "webpack-dev-server --inline --progress --config build/webpack
vue-cli --动态配置Ip地址，而不需要每次都打包
weixin_33895475的博客
07-23 2790
思路： 1.在不参与打包的文件外新建一个ipConfig.js，然后在index内引入其中的参数。 - ipconfig.js //ip配置参数 const IPCONFIG = 'http://111.231.75.122/'; 复制代码index.js <!DOCTYPE html> <html> <head> <meta chars...
Vue CLI 官方文档（三）模式和环境变量（--mode，.env）、构建目标（--target）、部署
qq_43456781的博客
10-11 1291
Vue CLI 官方文档（三）模式和环境变量（–mode，.env）、构建目标（–target）、部署 文章目录Vue CLI 官方文档（三）模式和环境变量（--mode，.env）、构建目标（--target）、部署1. 模式和环境变量模式环境变量示例：Staging 模式在客户端侧代码中使用环境变量只在本地有效的变量2. 构建目标应用库Vue vs. JS/TS 入口文件Web Components 组件注册多个 Web Components 组件的包异步 Web Components 组件在构建时使用
Vue第五天学习总结——Vue全家桶之前端工程化(模块化相关规范、webpack、Vue单文件组件、Vue脚手架、组件库——Element-UI 的基本使用)
weixin_52819925的博客
08-27 991
(一) 模块化相关规范 1. 模块化概述 传统开发模式的主要问题 命名冲突：多个js文件中的同名变量会冲突 文件依赖：js文件之间无法相互引用问题 通过模块化解决上述问题 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护 2. 浏览器模块化规范 AMD Require.js (http://www.requirejs.cn/) CMD Se
Webpack初始化配置和几个加载器
qq_38192709的博客
02-22 211
webpack 是一个流行的前端项目构建工具（打包工具），可以解决 web 开发中所面临的困境 webpack 提供了友好的模块化支持，以及代码压缩混淆，处理 JS 兼容问题，性能优化等强大的功能，从而让程序员把工作重心放到功能实现上，提高开发效率和项目的可维护性 1. package.json 文件初始化 ①： 新建项目空白目录，并运行 npm init -y 命令， 初始化包管理配置文件 package.json ②： 新建 src 源代码目录 ③： 新建 src -> index.html 首页
webpack的基本使用+webpack中加载器的基本使用+Vue 单文件组件
qq_45770253的博客
06-13 339
webpack 的基本使用 1. 创建列表隔行变色项目 ① 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json { "name": "webpack-study", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1
cli3暴露api地址 vue_vue cli3-cli4 本地反代解决本地调试线上api跨域问题 proxy
weixin_34382844的博客
12-24 271
跨域一直是很烦人问题，不过好现在现在跨域，大部分都是肛后端，后端设置CORS信息即可。但是也有少部分，可能前端能完成的事前端搞定就行了，懒得麻烦后端，这种情况一般都是进行反代。使用场景后端提供了一个在线api地址，但是该地址段和本地localhost不在同一域名下，所以产生了跨域。配置反代 proxy这种情况，我们的vue-cli提供了一个很好的功能，反代。首先我们需要找到vue cli的配置文件...
通过IP地址访问前端Vue项目
最新发布
2301_78767322的博客
01-16 1262
通过IP地址访问前端Vue项目
vue项目怎样既能通过ip访问项目，又可以本地localhost访问
weixin_42734024的博客
09-04 1397
一. package.json "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0" 二. /config/index.js host: '0.0.0.0',
实现vue项目可通过 IP 和 localhost 同时访问
小R.的博客
04-26 3707
  今天遇到了一个问题，好在解决啦。   问题是这样的，我本地的IP地址，在我的vue项目里却无法访问。如下图所示。傻傻怀疑是防火墙的问题。。。   解决方法： 1、在项目 config文件夹下的index.js文件中，修改host为0.0.0.0 2、修改package.json文件中的dev，在后面加上--host 0.0.0.0，记得中间空个格   这样可以实现本地IP地址访问，但是启动服务器时，自动打开的网页是0.0.0.0开头的，如果想以IP地址开头，需要进行下一步操作。 3、在build文
解决vue的webpack-simple项目无config目录，ip地址无法访问的问题
益添的博客
05-22 1万+
今天原本想把自己的网站给别人看一下（局域网），启动vue后，使用localhost和127.0.0.1都可以访问，但是用ip地址192.168.XX.XX 却访问不了，找了其他资料，都是修改vue项目config文件夹下的 index.js，详见：如何解决vue项目ip地址无法访问的问题，但是这个方法是针对完整的webpack才有这个目录，我的项目刚开始建的时候使用的是webpack-simple...
vue项目在使用ip地址加端口号不能访问时
weixin_43756060的博客
02-21 2979
修改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(7)：vue项目部署到服务器通过公网IP访问
偉ing的博客
06-25 7344
Vue项目部署到服务器通过公网IP访问 一、vue项目打包 1.打包项目及修改文件 ​ 在本地的项目完成后，可能需要将其部署到服务器上，并且通过公网IP就可以访问到这个项目，下面介绍一下具体的部署流程。 ​ 首先将写好的vue项目打包，在vue项目的当前目录下面运行npm run build，运行完成后，就可以发现项目中多了一个dist的文件夹，这是打包好的文件，可以用来直接运行。文件夹项目包含一个static和index.html文件，static文件下包含的是所有的源代码和数据，index.html
解决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项目通过network的ip地址访问注意事项
Tang__CT的博客
01-22 5521
Vue项目通过network的ip地址访问方法 在config.js文件中的dev中修改host为0.0.0.0 devServer: { // 环境配置 host: '0.0.0.0', port: 8080, https: false, hotOnly: false, disableHostCheck: true, open: false // 配置自动启动浏览器 }, 或者在packag
Vue-cli 2.9.3 安装与项目初始化教程
4. 启动项目与开发：在项目目录下执行 `npm run serve` 或者 `vue serve` 命令，即可启动本地开发服务器，预览和调试项目。Vue CLI 提供的热重载功能允许你在代码修改后立即看到更新，极大地提高了开发效率。 5. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值