vue3项目启动自动打开浏览器以及server配置过程
更新时间：2024年03月12日 09:36:14 作者：Celester_best
这篇文章主要介绍了vue3项目启动自动打开浏览器以及server配置过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
正常情况下，刚创建的项目在执行npm run dev命令后不会自动打开浏览器，为了方便可以设置项目启动自动打开浏览器。
项目启动自动打开浏览器
方法一
在package.json文件夹下在dev和build命令后面添加--open，重新执行npm run dev命令即可
"scripts": {
"dev": "vite --open",
"build": "vite build --open",
"preview": "vite preview"
},方法二
在vite.config.js文件中配置server
export default defineConfig({
plugins: [vue()],
server: {
host: '127.0.0.1',
port: '8888',
open: true,
https: false
},
})server配置的说明
server: {
host: '127.0.0.1',// 指定服务器应该监听哪个 IP 地址
port: '8888', // 指定开发服务器端口
strictPort: false, // 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
open: true, // 开发服务器启动时，自动在浏览器中打开应用程序
https: false // 是否开启 https
},ps:关于proxy的配置后面会单独进行说明。
配置server时的报错
1、Error: getaddrinfo ENOTFOUNDlocalhost.my.com
at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:71:26)
或者是报如下错误：
可以修改hhosts文件，hosts文件的位置：C:\Windows\System32\drivers\etc
可以在hosts文件中配置要访问的名称
然后运行项目之后host名称就会修改为配置的名称
vue2项目启动自动打开浏览器的配置
vue2项目需要在config文件夹下进行设置
设置方法如下：
autoOpenBrowser: true
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在本篇文章中，我们给大家详细讲述了vue中如何配置less的详细代码和步骤，有需要的朋友跟着学习下。2018-09-09
弹窗效果是在Web开发中经常用到的一种交互效果,它可以在用户点击某个按钮或者触发某个事件时显示一个悬浮框,提供用户与页面进行交互的机会,这篇文章主要给大家介绍了关于vue写一个全局弹窗组件通过js调用的方法,需要的朋友可以参考下2024-06-06
这篇文章主要为大家详细介绍了Vuex实现购物车小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
在 Vue.js 中,组件是构建应用程序的基本单位,然而,当你的应用程序变得复杂时,组件之间的通信变得至关重要,本文将介绍几种 Vue 组件之间通信的方式,帮助你更好地管理和组织代码,感兴趣的朋友一起看看吧2024-06-06
在Vue应用中,结合前端和后端接口请求实现动态路由,可根据用户权限动态生成路由,提高安全性与灵活性,本文就来介绍一下前端+接口请求实现vue动态路由,感兴趣的可以了解一下2024-09-09
本文主要介绍了Vue简易注册页面+发送验证码功能的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
今天小编就为大家分享一篇Vuejs2 + Webpack框架里,模拟下载的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue中关于_ob_:observer的处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
前端框架学习总结之Angular、React与Vue的比较详解
这篇文章主要跟大家分享了关于前端框架中Angular.js、React.js与Vue.js的全方位比较，文章介绍的非常详细，对大家进行区分对比这三者之间的差异区别很有帮助，需要的朋友可以参考借鉴，下面来一起看看吧。2017-03-03
对整个系统来说，一般会有很多业务对象，而每个业务对象的API接口又有很多。我们这个VUE+Element 前端应用就是针对ABP框架的业务对象，因此前端的业务对象接口也是比较统一的，那么可以考虑在前端中对后端API接口调用进行封装，引入ES6的方式进行前端API的抽象简化。2021-05-05
最新评论