Vue 项目运行完成后自动打开浏览器的方法汇总

目录
  • 方法一：package.json（适用于vue3）
  • 方法二：vue.config.js
  • 方法三：插件+webpack

方法一：package.json（适用于vue3）

在文件中找到scripts–serve，在后面添加

--open

方法二：vue.config.js

该方法适用于 有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 项目自动打开浏览器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 让webpack+vue-cil项目不再自动打开浏览器的方法

    当我们用vue-cil建立一个完整的webpack+vue的项目之后,它的设置选项还是蛮多的.比如,当我们输入npm run dev开始跑起项目之后,就会自动的打开浏览器,并把页面打开. 按理说,这是一个很方便的配置.问题是,我们在调试的过程中,可能需要不断的重启项目.每一次重启,就会开一个网页,让我非常头疼. 查看了一下,找到了解决方法,分享给各位看官. 打开 /build/dev-server.js 文件 末尾,代码如下: // when env is testing, don't need

  • Vue 项目运行完成后自动打开浏览器的方法汇总

    Vue 项目运行完成后自动打开浏览器的方法汇总

    目录 方法一:package.json(适用于vue3) 方法二:vue.config.js 方法三:插件+webpack 方法一:package.json(适用于vue3) 在文件中找到scripts–serve,在后面添加 --open 方法二:vue.config.js 该方法适用于 有vue.config.js的项目 找到vue.config.js文件,找到devServer,添加下面代码 open : true 方法三:插件+webpack 该方法存在局限性,仅适用于当前只运行一个项目

  • 在vue项目创建的后初始化首次使用stylus安装方法分享

    项目创建报错: This dependency was not found: * !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1d57e5ea","s

  • vue配置启动项目自动打开浏览器方式

    vue配置启动项目自动打开浏览器方式

    目录 vue配置启动项目自动打开浏览器 1.找到项目中的config文件夹内的index.js 2.打开package.json找到启动命令 3.在根目录下新建vue.config.js文件 npm run dev运行项目自动打开浏览器 vue配置启动项目自动打开浏览器 1.找到项目中的config文件夹内的index.js 里面有一个配置是autoOpenBrowser:false: 设置为true即可(或者全局搜索autoOpenBrowser设置为true) 2.打开package.jso

  • 默认浏览器设置及vue自动打开页面的方法

    以下为windows 系统操作,仅供参考. 一.修改默认浏览器 个人偏好谷歌浏览器,设置谷歌浏览器为默认浏览器. 1.首先打开"开始菜单",点击"控制面板": 2.在"控制面板"里面找到"默认程序",进入后点击"设置默认程序": 3.加载好后选择 "谷歌浏览器": 4.选择"将此程序设置为默认值",如果安装360安全卫士,必须先退出360安全卫士,否则设置不起效果.

  • 解决vue项目运行提示Warnings while compiling.警告的问题

    是因为创建项目的时候设置了eslint所以才会有下面的警告,Use ESLint to lint your code? (Y/n) 这一步选no 如果不想有规范的js代码,可以关掉eslint. 解决办法: 1.找到build下面的webpack.base.conf.js 注释后重启项目 2.或者打开config文件下的index.js,里useEslint改为false,重启项目 补充知识:vue cli3 热更新 保存时自动刷新页面内容 + 分离环境变量.env package.json配置

  • vue项目打包发布后接口报405错误的解决

    vue项目打包发布后接口报405错误的解决

    目录 vue项目打包发布后接口报405 vue项目打包之后接口出现错误问题 错误信息 关键代码 解决方式 vue项目打包发布后接口报405 vue项目前端做了代理打包后后台不识别报405 not allowed vue.config.js文件配置   devServer: {     // host: "0.0.0.0", //项目运行时的本地地址     // port: 8880, // 端口号     //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为

  • vue-cli3启动服务如何自动打开浏览器配置

    vue-cli3启动服务如何自动打开浏览器配置

    目录 vue-cli3启动服务自动打开浏览器配置 vue-cli自动打开默认浏览器0.0.0:8080 vue-cli3启动服务自动打开浏览器配置 1.首先创建一个vue-cli3项目. 2.找到package.json文件 3.找到配置项‘scripts’ 4.找到配置项‘serve’ 5.修改下,加个字段 “serve”: “vue-cli-service serve --open” 如果不想每次默认打开浏览器还可以将上图中的 --open,替换成 --copy (将本地 URL 复制到剪切

  • 解决ios微信下vue项目组件切换并自动播放音频问题

    解决ios微信下vue项目组件切换并自动播放音频问题

    最近在做一个英语答题项目 , 项目需求是通过答题取的成绩 , 答题的题型是分为 , 听音选图 , 看图选词 , 和填空题 . 项目总共分为了3个页面 , 开始页 ,答题页 和结束页面 ,答题页关于每种题型 , 我做了相应的组件 , 每次切换题目的时候 ,显示对应的的组件 , 要求听音选图的时候会自动播放音频 . 惯例 , ios下的safari和微信内置浏览器都不支持audio的自动播放 , 通常的解决方案都是通过 document.addEventListener('WeixinJSBridg

  • vue修改vue项目运行端口号的方法

    vue修改vue项目运行端口号的方法

    一.导语 最近在研究,左侧是导航,右侧是显示对应的内容,左右可单独滚动,不互相影响,如何实现? 萝卜蹲的游戏大家都玩过,白萝卜蹲,白萝卜蹲,白萝卜蹲完红萝卜蹲,可是若是在含有滚动条的页面的情况下,白萝卜是子元素,红萝卜是父元素,白萝卜蹲完不想让红萝卜蹲,怎么办? js是直接用阻止默认事件e.preventDefault(); ,vue虽然也有阻止默认事件@scroll.prevent,但是并没有效果啊,怎么办啊??有木有同学会啊??? 二.正文 记录下如何更改vue项目运行的端口号 使用webp

随机推荐