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,
}
})然后重新启动项目，就可以在浏览器自动打开了。兄弟们，是不是挺简单的。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
文章介绍了使用JavaScript判断图片和PDF是否可以预览的方法,对于图片,通过创建Image对象并监听其load和error事件来判断；对于PDF,则通过发送HTTP请求并检查响应类型为blob来判断,需要的朋友可以参考下2026-04-04
前端如何调用Go语言后端接口(HTML + JS & Vue)
这篇文章主要介绍了前端如何调用Go语言后端接口(HTML + JS & Vue)的相关资料,文中通过代码还讨论了跨域问题的解决方法,并对比了HTML+JS和Vue的不同适用场景,需要的朋友可以参考下2026-01-01
这篇文章主要介绍了vue实现修改标签中的内容：id class style，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
文章介绍了vue中向子组件传值并允许修改的机制,通过defineModel实现双向绑定,它返回一个ref,并且可以配置底层prop的选项,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2025-01-01
当你跑起一个项目的时候,第一步需要先安装依赖npm install,下面这篇文章主要给大家介绍了关于npm install安装报错的几种常见情况,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vue路由传参-如何使用encodeURI加密参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
在Vue中自定义组件是一个强大的功能,它允许你将可重用的代码封装成独立的模块,从而提高开发效率和代码的可维护性,这篇文章主要介绍了Vue表单组件进阶之如何打造属于你的自定义v-model的相关资料,需要的朋友可以参考下2025-11-11
这篇文章主要介绍了vue操作dom并为dom增加点击事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
本文主要介绍Vue.js中过滤器和自定义指令相关的知识点，包括过滤器的定义方式，和使用方法，以及自定义指令的概念和注册方式。2021-05-05
这篇文章主要介绍了Vue 全部生命周期组件梳理整理，在创建组件之前使用；在实例初始化之后,进行数据侦听和事件，侦听器的配置之前同步调用2022-06-06
最新评论