Vue项目启动后如何在浏览器自动打开
更新时间：2024年08月27日 10:35:37 作者：前端的小白
这篇文章主要介绍了Vue项目启动后如何在浏览器自动打开问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue项目启动后在浏览器自动打开
想要实现 Vue 项目在浏览器自动打开，只需要几步简单的操作就可以实现了。
我这里是使用了Vue3.x的脚手架创建的项目，项目的目录架构你们有可能是和你们的不太一样，但是道理是这样子的道理。
其他话不多说，直接上步骤安排。
1.找到Vue项目的package.json文件
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},在 scripts 代码块的 server 的后面加上 --open ，然后重新启动项目。
做到这里的时候其实有些人的项目是可以直接在浏览器启动的，但是我的不可以的，会遇到无法访问网站的问题。
后来我又找了一下，是还需要配置第二步的 。
2.找到vue.config.js文件
没有这个文件的话要自己创建一个，然后在里面加上如下的代码段
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{ //用于开发环境
host: 'localhost',
port: 8080,
}
})然后重新启动项目，就可以在浏览器自动打开了。兄弟们，是不是挺简单的。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了keep-alive不能缓存多层级路由菜单问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
我们有时候会遇到要输入框自动获取焦点的情况,下面这篇文章主要给大家介绍了关于Vue Input输入框自动获得焦点的简单方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
Vue3使用transition组件改变DOM属性的方式小结
这篇文章主要为大家详细介绍了Vue3中使用transition组件改变DOM属性的常用方式,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
详解为element-ui的Select和Cascader添加弹层底部操作按钮
这篇文章主要介绍了详解为element-ui的Select和Cascader添加弹层底部操作按钮，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
vue中使用echarts刷新可以正常渲染但路由跳转不显示的问题解决
在 Vue 中使用 ECharts 组件时,遇到路由跳转后图表不显示的问题可能是因为组件销毁和重新创建的原因,所以本文给大家介绍了vue中使用echarts刷新可以正常渲染但路由跳转不显示问题的解决方法,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了vue如何给页面增加url前缀问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
在 Vue 开发中，利用 new Date() 方法可以方便地获取当前时间，并通过 Date 对象的方法进行时间格式化和操作。通过本文的介绍，您应该对在 Vue 中获取当前时间有了更深入的了解，并了解了一些常见的时间操作方法,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue如何获取当前url地址加端口号问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
Vue3 openlayers加载瓦片地图并手动标记坐标点功能
这篇文章主要介绍了 Vue3 openlayers加载瓦片地图并手动标记坐标点功能,我们这里用vue/cli创建,我用的node版本是18.12.1,本文结合示例代码给大家介绍的非常详细,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了electron实现静默打印的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
最新评论