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
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于vue3前端获取文件的绝对路径问题解决的相关资料,文中通过代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
解决vue2 在mounted函数无法获取prop中的变量问题
这篇文章主要介绍了vue2 在mounted函数无法获取prop中的变量的解决方法 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
<Transition> 是一个内置组件,这意味着它在任意别的组件中都可以被使用,无需注册,它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上,本文介绍了Vue3使用transition实现组件切换的过渡效果,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了Vue.js构建你的第一个包并在NPM上发布的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了VUE PC端可拖动悬浮按钮的实现代码,通过实例代码介绍了父页面引用的方法,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2024-02-02
如今Vue3的势头正盛，在diff算法方面也做了相应的变化，利用到了最长递增子序列把性能又提升了一个档次。本文就来带大家简单解刨一下Vue3中的diff算法2023-02-02
这篇文章主要为大家介绍了ElementUI Upload源码组件上传流程解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了vue如何自定义封装API组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
vue/cli3.0脚手架部署到nginx时页面空白的问题及解决
这篇文章主要介绍了vue/cli3.0脚手架部署到nginx时页面空白的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue实现骨架屏的示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
最新评论