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

最新推荐文章于 2025-07-02 11:49:24 发布
原创 最新推荐文章于 2025-07-02 11:49:24 发布 · 3.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript #json #npm #vue #node.js

本文介绍了如何通过修改package.json文件中的script节点，添加--open参数，实现前端项目启动时自动打开浏览器，减少手动操作的繁琐，提高开发效率。

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

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

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

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

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

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

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

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

vue3 项目启动，自动打开浏览器“dev“: “vite --open“,
jieweiwujie的博客
02-15 342
在package.json中添加 --open。
Vite - 开发初体验，以及按需导入配置
CYK_byte的博客
06-09 4591
a）这里我们只需要在 vite.config.js 文件中引入 elementPlus 的解析器，然后把她交给 Components 按需引入插件即可.之后就可以观察到项目中多出了 node_modules 文件（这个文件中存放的就是下载好的依赖），然后通过 npm run dev 就可以成功了。c）接下来你会发现，在 Home.vue 组件中使用 Foo.vue 组件，就可以不用写 import 了~a）例如我们在 Home.vue 文件中使用 ref 写了一个计数器（点击按钮，count++）.
vue3学习之路-项目启动自动打开浏览器以及server配置
Celester_best的博客
03-26 3970
该文章主要包括以下几个内容 1、vue3+vite项目配置项目启动默认打开浏览器的方法 2、vite.config.js中关于server的相关配置说明 3、配置server报错的解决方法 4、vue2项目中配置项目启动默认打开浏览器的方法
vite配置
qianOye的博客
05-18 794
（2）敲入pnpm dev（pnpm run dev简写），启动项目的时候就能自动打开了。（1）打开vite.config.ts，写入open：true。配置1：自动打开网页，省去我们自己复制地址粘贴到浏览器上。
实现Vue3项目运行后浏览器自动打开的操作
ganggun的博客
08-16 584
实现Vue3项目运行后浏览器自动打开的操作
Vue3打开默认启动项目自动开启浏览器
wulei1225的博客
05-07 1357
在vue.config.js文件里面，加上devServer: { host: 'localhost', port: 8080, open:true}，就可以了。记得重新启动一下项目哦。 代码如下： const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, devServer: { host: 'localho...
精选资源
基于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等。...
精选资源
Electron+Vite+Vue3 模版
05-31
标题 "Electron+Vite+Vue3 模版" 提供了一个关于软件开发的集成环境，它结合了三个强大的技术栈：Electron、Vite 和 Vue3。这个模版是为开发者构建跨平台桌面应用而设计的，允许开发者使用现代前端技术栈的同时，...
精选资源
electron+vite+vue3+sqlite3基础框架
12-14
本项目是一个基于`Electron`的桌面应用程序开发框架，它结合了现代前端开发工具`Vite`和流行的前端框架`Vue.js`的最新版本`Vue3`，以及轻量级的本地数据库系统`SQLite3`。这个基础框架为开发者提供了一个快速启动新...
【Vite+Vue3+TS】基于Vite+Vue3+TypeScript+ESLint+Prettier+Stylelint搭建项目（亲测超详细）
aDiaoYa_的博客
01-25 3976
结合了很多项目和文章，总结一篇项目构建的笔记。 温馨提示：文章末尾记录了我在搭建项目过程中，遇到的一些问题和解决办法 ~
vue3+vite项目运行后如何自动在浏览器打开
最新发布
weixin_44594219的博客
07-02 451
vue3+vite项目运行后如何自动在浏览器打开
vue3+vite项目启动后自动打开浏览器配置
weixin_45621877的博客
02-02 3176
1）. 找到左侧目录中的package.json文件，在。2）在启动后面加上 --open 即可。立即启动 并打开浏览器。
vite项目，编译后，直接自动打开的配制方法
花花鱼的专栏
07-26 919
vite项目编译后，直接自动打开，增加open:true就可以实现。
运行项目后自动打开默认的Web浏览器
HWL5679的博客
03-04 1005
--open: 这是一个可选参数，用于在启动服务器后自动打开默认的Web浏览器，并导航到Vite服务器的地址。
vue-cli3 运行自动打开浏览器的方法设置
大剑师兰特的GIS世界
06-09 504
曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；优快云知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。
Vite+Vue3项目配置自动打开浏览器
weixin_49075175的博客
07-26 515
由于目前主流是create-vue初始化vue项目，因此目前是在package.json下做如下操作：
vue3 配置在启动时就打开网页
weixin_43270299的博客
05-23 643
配置server的open属性为true就可以在测试的时候启动时自动打开网页。
vue3+ts项目 启动后自动开启浏览器配置
残阳曦月
04-12 773
在package.json文件中 配置，添加 --open，重启项目即可。
Vue3 + Vite + CesiumJS 项目配置与封装实践
而 Vite 作为新一代前端构建工具，利用浏览器原生 ES Module 支持，实现了极速的冷启动和热更新，尤其适合像 Cesium 这类大型库的快速开发调试。相较于传统的 Webpack 构建方式，Vite 在开发环境下无需打包即可直接...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

平静方能至远

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

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

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

打赏作者

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

抵扣说明：

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

余额充值