VUE项目运行npm run dev命令后,自动打开浏览器导航到主页

VUE项目运行npm run dev命令后,需要再次输入字母 "o"才会打开浏览器导航到主页,要实现自动打开,需要修改项目中的 package.json 文件。

修改前:

 "scripts": {
    "dev": "vite ",
     ......
  },

修改后:

 "scripts": {
    "dev": "vite --open",
    ......
  },

再次运行npm run dev命令,就可以自动打开浏览器导航到主页。
如果不能生效,使用以下命令查看open包是否安装,命令:npm list open

C:\Users\Administrator>npm list open
C:\Users\Administrator
`-- (empty)

如果运行 npm list open 命令后返回了 – (empty),这意味着 open 包没有在你的项目依赖中找到。这可能是因为 open 包尚未被安装,或者它不是作为项目依赖被安装的。
如果 open 包确实没有安装,你可以通过以下命令来安装它:

pnpm install open --save-dev
### Vue3 项目 `npm run dev` 命令自动启动配置 对于Vue3项目,在使用`npm run dev`命令时遇到无法正常暴露服务以及未能实现自动启动的问题,可以通过调整`package.json`文件内的脚本部分来改善这一状况。通常来说,当开发者希望在执行`npm run dev`后能够立即让浏览器自动跳转至应用首页,则需确保开发服务器设置正确无误。 考虑到不同版本的Vue CLI可能有不同的默认行为,为了使`npm run dev`能顺利运作并具备自动开启浏览器的功能,建议按照以下方式操作: #### 修改 `package.json` 找到项目的根目录下的`package.json`文件,并对其进行编辑。具体而言,可以在`scripts`字段下定义一个新的键值对用于指定启动选项。例如,通过引入`open-browser-webpack-plugin`插件辅助完成自动化流程[^5]。 ```json { "name": "your-project-name", ... "scripts": { "serve": "vue-cli-service serve --open", // 使用此行代替原有的dev/start指令可简化配置过程 "build": "vue-cli-service build" }, ... } ``` 值得注意的是,上述示例中采用了`vue-cli-service serve --open`的形式替代传统的`webpack-dev-server`调用模式,这不仅有助于兼容最新版Vue CLI工具链,而且内置了自动打开浏览器的支持特性[^4]。 另外,针对网络连接方面的问题,如本地机器以外的地方尝试访问开发环境时遭遇阻碍的情况,应当确认是否已经加入了必要的主机地址绑定参数(比如`--host 0.0.0.0`),从而允许外部设备也能成功请求资源[^1]。 最后,如果依旧面临挑战或是偏好继续沿用`npm run dev`作为主要入口之一的话,那么不妨考虑同步更新对应的命令字符串为类似于下面这样: ```json "dev": "vue-cli-service serve --mode development --open --host 0.0.0.0" ``` 这样做既保留了原有习惯又实现了预期效果——即每次触发`npm run dev`都会自动加载网页的同时对外开放接口给局域网内其他终端访问[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

family20102010

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

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

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

打赏作者

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

抵扣说明:

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

余额充值