关于vue 启动项目的时候 自动打开 并使用本地ip打开

最新推荐文章于 2024-07-08 11:12:46 发布
最新推荐文章于 2024-07-08 11:12:46 发布
阅读量694 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47408822/article/details/119037050
版权
本文介绍了如何在Vue项目中设置自动启动浏览器和使用本地IP访问。只需在`config/index.js`中添加`autoOpenBrowser: true`，并在`webpack.dev.conf.js`里启用`devServer.useLocalIp`，即可实现这些功能。
摘要由CSDN通过智能技术生成

当我们创建一个 vue项目 启动项目的时候想让项目自动打开
项目自动打开：再confing文件夹下面的index下面

module.exports里面加上autoOpenBrowser: true,就可以

使用本地id打开的话 再webpack.dev.conf.js下面

devServer.useLocalIp

就可以啦

杜小帅666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 自动获取本地ip，并打开浏览器
主要分享大数据相关的知识，如Spark、Hudi
05-29 6584
前言 功能如题，本文参考：https://www.jianshu.com/p/54daac2cc924，目的只是为了把网上查的资料做个笔记~ 以下均为vue cli2 创建的项目 自动打开浏览器 只需要在config/index.js里找到autoOpenBrowser将其设为true即可 获取本地ip 方法一 在config/index.js 顶部添加 const os = require(...
解决vue中使用proxy配置不同端口和ip接口问题
12-01
总结来说，解决Vue项目中跨域问题的关键在于理解并正确使用`devServer.proxy`配置，以及在项目结构中设计灵活的接口地址管理策略。通过这些方法，你可以轻松应对多后端服务的开发需求，同时减少因接口变动带来的不必...
vue项目在启动时，自动打开浏览器，并且打开地址是自己本地的IP地址
文龙刚的博客
02-03 2288
【代码】vue项目在启动时，自动打开浏览器，并且打开地址是自己本地的IP地址。
vue项目启动后实现localhost和局域网内ip访问页面
最新发布
2301_78187511的博客
07-08 316
【代码】vue项目启动后实现localhost和局域网内ip访问页面。
vue-cli3设置项目ip
ANNENBERG的博客
07-21 1782
1、创建vue.config.js (cli3相对于cli2，之前的build和config文件夹不见了，那么应该如何配置 如webpack等的配那只需要在项目的根目录下vue.config.js 文件（是根目录，不是src目录)） module.exports = { devServer: { port: 8080, // 端口号 host: "localhost", https: false, // https:{type:Boolean}
Vue - 同时使用 ip、localhost访问项目
iotjin的专栏
03-10 1523
Vue - 同时使用 ip、localhost访问项目
vue项目代理配置ip地址和端口号
m0_55918015的博客
01-19 1万+
在vue.config.js文件中，有几个嫌疑对象，port，host，target，一般host设置为0.0.0.0，大概就是自动匹配本机任意的ip地址，有啥用啥，感兴趣的可以自行搜索，这算是比较方便的写法，说是电脑手机都可以访问。port是本机的端口号，找一个能用的端口就行，像8080,90等等。 proxy里面的target就是代理，process是过程，就是项目启动的全局变量，process.env打印出来就是项目跑起来需要的环境，是一个环境变量，配合各种场景使用（应该是这么理解的吧too sad
vue 本地服务不能被外部IP访问的完美解决方法
10-17
此外，如果你希望在每次启动项目时自动使用特定IP，可以在`package.json`的`scripts`部分中更新`dev`命令，指定`--host`参数为你想要的IP地址： ```json "scripts": { "dev": "webpack-dev-server --inline --...
Vue移动端项目实现使用手机预览调试操作
10-15
6. **手机预览与调试**：在手机上，使用微信或其他具备扫码功能的应用扫描刚才生成的二维码，手机将会自动打开浏览器并访问你的Vue项目。这样，你就能在手机上预览项目的效果了。 为了进行调试，你可以利用Chrome的...
使用vue-cli3+typescript的项目模板创建工程的教程
11-21
在项目文件夹下，你可以使用以下命令启动项目： ```bash npm run serve ``` 这将会启动一个热重载的本地开发服务器。 **五、项目结构与配置** Vue CLI 3 创建的项目通常包含以下关键文件和目录： - `src`：源代码...
webpack vue项目开发环境局域网访问方法
11-28
由于你已经将`host`设置为局域网IP，本地的`localhost`访问将不再可用，因此所有设备都需要使用这个IP地址进行访问。 5. **安全考虑** 使用自定义端口而不是常见的80或443端口可以避免潜在的安全问题，因为这些...
vue webpack 自动打开页面_进阶| Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架（上篇）...
weixin_39841610的博客
12-18 67
原标题：进阶| Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇)嗨这里是IMWEB本文作者：鹅厂高级工程师--郑高强文章来源：http://www.cnblogs.com/kenkofox导语一般来说，使用vue做成单页应用比较好，但特殊情况下，需要使用多页面也有另外的好处。例如手Q的多webview架构，新开页面有利于ios右划返回，也避免了返回时页面的刷新。...
vite (vue3)配置内网 ip 访问 方法
qq_39111074的博客
04-01 1万+
vite 配置内网 ip 访问 方法
Vue3使用vite配置前端服务IP、端口、跨域代理、访问资源路径前缀
热门推荐
郭新宇的博客
06-30 7万+
Vue3配置代理跨域(使用vite.config.js文件配置vite.config.js 配置文件 vue3发布有一段时间了，其中vite感觉很好用，现在配置跨域和服务端口等配置，可以不使用vue-cli的vue.config.js了，可以只使用vite.config.js进行配置。 vite.config.js 配置文件 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' const { resolve
vue项目打包在本地打开（开启一个本地服务器）
weixin_38289645的博客
11-28 7053
今天是打包的时候看到这个提示： Tip: built files are meant to be served over an HTTP server.   Opening index.html over file:// won't work. 然后学到到node.js里面的http-server开启本地服务，从本地文件夹中直接打开的一般都是file协议，当代码中存在http或https的链接...
VUE：项目打包后，如何本地访问
干饭搬砖两不误。
09-10 1万+
项目打包后，想看一下有没有问题再部署，那么就需要打包后的本地访问，就需要用到插件serve
vue 项目中调用电脑本地资源
weixin_52378342的博客
02-23 1233
<input type="file" ref="file" multiple="multiple" @change="onInputFileChange"> onInputFileChange() { var photos = [] for (let obj in this.$refs.file.files){ var file = this.$refs.file.files[obj] var url = URL.createObje
vue项目打包在本地直接访问
M_SSY的博客
09-26 1万+
1.打开项目文件夹。找到config文件夹里的index.js文件中的build对象，将assetsPublicPath中的“/”，改为“./”。   2.router文件下面的index.js路由配置文件不要配置mode: "history"（不用配置这个属性）   3.修改config里面的index.js里面的productionSourceMap为false,默认情况是true（t...
Vue项目本地运行设置自动打开浏览器
Fansr_的博客
08-19 412
目前统计了三种可操作的方法,仅供参考: 一、在package.json文件中的scripts下的serve属性后面增加--open "scripts":{ "serve":"vue-cli-service --open", }, 二、在config文件夹下面的index.js文件中设置(VueCli2) autoOpenBrowser:true, 三、在vue.config.js文件中devServer这是open为true(VueCli3+) devServer:{ ...
vue项目启动完成后，如何自动打开项目
05-21
在Vue CLI 3.x版本及以上的项目中，可以在`package.json`文件中的`scripts`中添加一条命令用于启动项目，并在命令中使用`open`命令自动打开浏览器。具体步骤如下： 1. 打开`package.json`文件 2. 在`scripts`中添加一条命令，例如：`"start": "vue-cli-service serve && open http://localhost:8080"` 3. 保存`package.json`文件 4. 打开命令行工具，进入到项目根目录，执行`npm run start`命令即可启动项目并自动打开浏览器。 注意：`open`命令在Windows系统上可能无法识别，可以使用`start`命令代替，例如：`start http://localhost:8080`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值