Vite+Vue3项目配置启动项目后自动打开浏览器

最新推荐文章于 2024-09-20 17:08:19 发布
最新推荐文章于 2024-09-20 17:08:19 发布
阅读量2.1k 收藏 1
点赞数 5
分类专栏： 前端 文章标签： vue.js 前端 javascript json npm vue node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/conscience50/article/details/136040758
版权
本文介绍了如何通过修改package.json文件中的script节点，添加--open参数，实现前端项目启动时自动打开浏览器，减少手动操作的繁琐，提高开发效率。
摘要由CSDN通过智能技术生成

        有时候，我们在启动前端项目时，输入了启动命令，但却需要我们手动点开控制台输出的URL链接

如果每次都要点这个连接，会十分繁琐

为了提高开发效率，减少不必要的操作，我们就来解决这个问题。

1.在文件资源管理器中找到package.json文件

2.在script节点中，给dev和build节点的内容后面追加加“--open”

3.再次在终端输入npm run dev命令，我们就可以成功自动打开浏览器了

 好了，今天分享到这里结束了

至此希望能够给你带来帮助(#^.^#)

vue3 项目启动，自动打开浏览器“dev“: “vite --open“,
jieweiwujie的博客
02-15 178
在package.json中添加 --open。
electron+vite+vue3+sqlite3基础框架
12-14
本项目是一个基于`Electron`的桌面应用程序开发框架，它结合了现代前端开发工具`Vite`和流行的前端框架`Vue.js`的最新版本`Vue3`，以及轻量级的本地数据库系统`SQLite3`。这个基础框架为开发者提供了一个快速启动新...
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架
vite+vue构建前端项目时本机ip启动
最新发布
初级码农~
09-20 563
在使用vue3+vite构建前端项目时，默认启动为 http://localhost:5173/导致同事无法在本地访问项目，故修改为本机ip+端口进行访问。
vite项目，编译后，直接自动打开的配制方法
花花鱼的专栏
07-26 506
vite项目编译后，直接自动打开，增加open:true就可以实现。
vue3+vite项目启动后自动打开浏览器配置
weixin_45621877的博客
02-02 2930
1）. 找到左侧目录中的package.json文件，在。2）在启动后面加上 --open 即可。立即启动 并打开浏览器。
Vite+Vue3项目配置自动打开浏览器
weixin_49075175的博客
07-26 315
由于目前主流是create-vue初始化vue项目，因此目前是在package.json下做如下操作：
运行项目后自动打开默认的Web浏览器
HWL5679的博客
03-04 563
--open: 这是一个可选参数，用于在启动服务器后自动打开默认的Web浏览器，并导航到Vite服务器的地址。
Vue3打开默认启动项目自动开启浏览器
wulei1225的博客
05-07 1208
在vue.config.js文件里面，加上devServer: { host: 'localhost', port: 8080, open:true}，就可以了。记得重新启动一下项目哦。 代码如下： const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, devServer: { host: 'localho...
vue3启动项目时，自动打开浏览器怎么配置？
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
01-30 5817
在package.json里script的serve命令这行 加上"--open"
vue配置启动项目自动打开浏览器
qq_39691676的博客
07-02 1780
找到项目中的config文件夹内的index.js，里面有一个配置是autoOpenBrowser:false； 设置为true即可。
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-10
# 本地开发 启动项目 借助hbuilder工具运行浏览器启动 ``` ## 下载依赖 ``` npm install cnpm install yarn # npm install 安装失败，请升级 nodejs 到 16 以上，或尝试使用以下命令： npm install --...
基于Vite+Vue3+TS+Nuxt3的仿爱彼迎网站源码.zip
06-21
在项目中，Vite作为启动服务器和编译工具，使得源代码的修改能够实时反映到浏览器中。 二、Vue3：新一代Vue框架 Vue3是Vue.js的最新版本，它引入了许多优化和新特性，如Composition API、Suspense、Teleport等。...
vite+vue+cesium项目搭建
03-13
【vite+vue+cesium项目搭建】是一个关于使用现代前端构建工具Vite，结合Vue.js框架，并集成3D地球渲染库Cesium的教程。Vite是由Vue.js作者尤雨溪开发的新型前端构建工具，它提供了更快的热模块替换（HMR）和更快的...
Electron+Vite+Vue3 模版
05-31
标题 "Electron+Vite+Vue3 模版" 提供了一个关于软件开发的集成环境，它结合了三个强大的技术栈：Electron、Vite 和 Vue3。这个模版是为开发者构建跨平台桌面应用而设计的，允许开发者使用现代前端技术栈的同时，...
vue + vue-cli/vite设置启动服务后，自动开启浏览器
kxbsn555的博客
04-21 722
使用前端脚手架（如vue-cli/vite）为我们创建项目后，在启动服务后，需要手动在浏览器中打开界面，这篇博客就教大家如何通过设置在启动服务后，自动开启浏览器并访问界面。在vue-cli-service serve后增加 --open。在dev的vite后增加–open。
实现Vue3项目运行后浏览器自动打开的操作
ganggun的博客
08-16 346
实现Vue3项目运行后浏览器自动打开的操作
vue3+ts项目 启动后自动开启浏览器配置
残阳曦月
04-12 594
在package.json文件中 配置，添加 --open，重启项目即可。
启动vue项目时自动打开浏览器
m0_70619994的博客
11-06 557
在package.json文件中找到 "serve": "vue-cli-service serve" 在最后面添加 --open。找到 vue.config.json 文件，没有这个文件的话要自己创建一个。然后再添加如下代码，最后再重启项目即可。
vue配置启动项目时，自动打开浏览器的方法：
SunPeng的博客
11-21 516
vue配置启动项目时，自动打开浏览器的方法：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

平静方能至远

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值