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
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
插槽（Slot）是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性,下面这篇文章主要给大家介绍了关于vue2中插槽(slot)的基本使用规范的相关资料,需要的朋友可以参考下2022-03-03
Vue3 Composition API优雅封装第三方组件实例
这篇文章主要为大家介绍了Vue3 Composition API优雅封装第三方组件实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue项目设置打包后的静态文件访问路径,vue项目的最终项目文件需要经过打包输出,静态文件的访问路径需要在vue.config.js文件中设置,本文给大家介绍的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要为大家详细介绍了springboot+vue实现文件上传下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要给大家介绍了关于vue中如何创建多个ueditor的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
这篇文章主要介绍了示例vue 的keep-alive缓存功能的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
Vue import from省略后缀/加载文件夹的方法/实例详解
本文介绍Vue在import时省略后缀以及import文件夹的方法，结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue 换肤方案验证，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了Vue中封装input组件的实例详解的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了在vant中如何使用dialog弹窗，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
最新评论