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

最新推荐文章于 2024-05-10 18:35:03 发布
最新推荐文章于 2024-05-10 18:35:03 发布
阅读量1.3k 收藏
点赞数 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命令，我们就可以成功自动打开浏览器了

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

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

平静方能至远
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3 项目启动，自动打开浏览器“dev“: “vite --open“,
jieweiwujie的博客
02-15 94
在package.json中添加 --open。
vite-vue3-template:Vite + Vue3项目模板
03-18
Vite + Vue3 项目模板是现代前端开发中的一个高效构建工具，它结合了Vue 3框架的最新特性与Vite的快速开发优势。Vite是由Vue.js的作者尤雨溪开发的一款新型构建工具，旨在解决传统Webpack在开发阶段的性能瓶颈。Vue ...
启动vue项目时自动打开浏览器
m0_70619994的博客
11-06 528
在package.json文件中找到 "serve": "vue-cli-service serve" 在最后面添加 --open。找到 vue.config.json 文件，没有这个文件的话要自己创建一个。然后再添加如下代码，最后再重启项目即可。
【功能：vue3 + vite 修改默认启动端口】 - 以及相关配置详细解答，刚学习的小伙伴强烈推荐
2302_78387246的博客
04-03 4656
【功能：vue3 + vite 修改默认启动端口】 - 以及相关配置详细解答，主要涉及到一些修改配置文件这块的，需要了解的朋友可以进来看看，都比较简单
vite构建包本地启动
最新发布
Java小白白的博客
05-10 363
在本地启动 Vite 前端项目并进行开发服务器部署需要安装一些 npm 包。这是用于在开发过程中实时预览项目的服务器。目录启动一个静态文件服务器，通常在。这会启动一个开发服务器，通常在。替换为你实际的项目目录。
vue3+vite项目启动后自动打开浏览器配置
weixin_45621877的博客
02-02 2737
1）. 找到左侧目录中的package.json文件，在。2）在启动后面加上 --open 即可。立即启动 并打开浏览器。
vue项目启动的同时自动打开浏览器
maggie的博客
12-22 236
vue项目启动的同时自动打开浏览器 1.找到vue项目下的package.json文件 在 “serve”: “vue-cli-service serve” 里添加 --open
vue + vue-cli/vite设置启动服务后，自动开启浏览器
kxbsn555的博客
04-21 656
使用前端脚手架（如vue-cli/vite）为我们创建项目后，在启动服务后，需要手动在浏览器中打开界面，这篇博客就教大家如何通过设置在启动服务后，自动开启浏览器并访问界面。在vue-cli-service serve后增加 --open。在dev的vite后增加–open。
在vue-cli3中自动打开浏览器
前端打工人的博客
10-16 766
在package.json文件中设置 "serve": "vue-cli-service serve --open" "scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build" },
vue配置启动项目时，自动打开浏览器的方法：
SunPeng的博客
11-21 455
vue配置启动项目时，自动打开浏览器的方法：
electron+vite+vue3+sqlite3基础框架
12-14
本项目是一个基于`Electron`的桌面应用程序开发框架，它结合了现代前端开发工具`Vite`和流行的前端框架`Vue.js`的最新版本`Vue3`，以及轻量级的本地数据库系统`SQLite3`。这个基础框架为开发者提供了一个快速启动新...
基于Vite+Vue3+TS+Nuxt3的仿爱彼迎网站源码.zip
06-21
在项目中，Vite作为启动服务器和编译工具，使得源代码的修改能够实时反映到浏览器中。 二、Vue3：新一代Vue框架 Vue3是Vue.js的最新版本，它引入了许多优化和新特性，如Composition API、Suspense、Teleport等。...
Vite+vue3+ts 项目初始化底座
02-21
【标题】：“Vite+vue3+ts 项目初始化底座” 在现代Web开发中，开发者经常寻求高效、快速的工具来构建Vue.js应用程序。Vite，由Vue.js作者尤雨溪开发，正逐渐成为这样的首选工具。它利用了最新的浏览器原生特性，...
vite+vue+cesium项目搭建
03-13
【vite+vue+cesium项目搭建】是一个关于使用现代前端构建工具Vite，结合Vue.js框架，并集成3D地球渲染库Cesium的教程。Vite是由Vue.js作者尤雨溪开发的新型前端构建工具，它提供了更快的热模块替换（HMR）和更快的...
运行项目后自动打开默认的Web浏览器
HWL5679的博客
03-04 367
--open: 这是一个可选参数，用于在启动服务器后自动打开默认的Web浏览器，并导航到Vite服务器的地址。
vue3+ts项目 启动后自动开启浏览器配置
残阳曦月
04-12 495
在package.json文件中 配置，添加 --open，重启项目即可。
vue自动打开浏览器
A2645765158的博客
03-06 327
vue自动打开浏览器
vue运行后自动打开浏览器
qq_45961038的博客
06-18 152
1.在package.json文件的scripts下的serve后加–open 2.在vue.config.js文件中添加devServer
如何用vite+vue3+ts创建项目
01-25
使用vite+vue3+ts创建项目的步骤如下： 1. 首先，确保你已经安装了Node.js和npm。可以在终端中运行以下命令来检查它们的版本： ```shell node -v npm -v ``` 2. 使用以下命令全局安装vite脚手架： ```shell npm install -g create-vite ``` 3. 创建一个新的vite+vue3+ts项目。在终端中运行以下命令： ```shell create-vite my-v3 --template vue-ts ``` 这将创建一个名为my-v3的项目，并使用vue-ts模板。 4. 进入项目目录： ```shell cd my-v3 ``` 5. 安装项目依赖： ```shell npm install ``` 6. 启动开发服务器： ```shell npm run dev ``` 这将启动一个本地开发服务器，并在浏览器中打开项目。 现在，你已经成功创建了一个vite+vue3+ts项目。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

平静方能至远

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

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

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

打赏作者

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

抵扣说明：

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

余额充值