Vue|Vue 项目运行完成后自动打开浏览器的方法汇总
目录
- 方法一:package.json(适用于vue3)
- 方法二:vue.config.js
- 方法三:插件+webpack
方法一:package.json(适用于vue3) 在文件中找到
scripts
–serve
,在后面添加--open
文章图片
方法二:vue.config.js
【Vue|Vue 项目运行完成后自动打开浏览器的方法汇总】该方法适用于 有vue.config.js的项目找到
vue.config.js
文件,找到devServer
,添加下面代码open : true
文章图片
方法三:插件+webpack
该方法存在局限性,仅适用于当前只运行一个项目输入下方指令安装插件
因为会默认打开8080
端口的项目
(其实按道理来说是可以做到动态的,因为vue在检测到8080端口被占用后会自增一)
在config--->index.js
下面对port
的定义应该是可被更改的
port: 8080 // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
所以我尝试了
new OpenBrowserPlugin({url: `http://localhost:${process.env.PORT || config.dev.port}/`})
和
new OpenBrowserPlugin({url: `http://localhost:${PORT || config.dev.port}/`}
但是都没有效果,挖个坑在这里吧!!!
cnpm i open-browser-webpack-plugin --save
文章图片
找到项目 中的
build
—>webpack.dev.conf.js
文章图片
在上方先定义一个变量
const OpenBrowserPlugin = require(‘open-browser-webpack-plugin')
文章图片
再找到
plugins
new OpenBrowserPlugin({ url: ‘http://localhost:8088/' })
文章图片
到此这篇关于Vue 项目运行完成后自动打开浏览器的方法汇总的文章就介绍到这了,更多相关Vue 项目自动打开浏览器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- es+flask搜索小项目实现分页+高亮的示例代码
- 历史上的今天|【历史上的今天】3 月 3 日(AT&T 成立;全球最大分布式计算项目正式停止;家酿俱乐部首次会议)
- uniapp|uniapp vue3 $on/$once/$off 的替代方案
- Vue|Vue 源码解读(8)—— 编译器 之 解析(下)
- 项目资料|基于JAVA+SpringBoot+Mybatis+Vue+MYSQL的智慧养老管理系统
- java项目精品实战案例|基于Java+SpringBoot+vue+node.js实现直行车租赁平台管理系统
- Vue3.0|Ant Design Vue表单验证基本操作
- vue|Vue | 原生audio样式不好看,自己写一个简易的音乐播放控件,实现播放暂停可拖动
- Blazor和Vue对比学习(基础1.1)(组件结构)
- VuePress|VuePress 博客优化之增加 Valine 评论功能