vue-admin-template 打开两次浏览器的问题

最近在开发一个应用,发现 vue-admin-template 模板 在 npm run dev 的时候会打开两次标签页,确切的说,刚按下回车时 会打开一次,项目启动完毕后又会打开一次,这个体验实在糟糕。按完回车,我意识到有这么一行输出:Starting development server,也正是这行输出提醒并帮我解决了这个问题。

最简单的办法是 将 vue/cli-service 升级到最新版本,比如 4.3.1 ,目前该项目 依旧是 3.5.3 而这个 bug 在 vue/cli-service 3.8.3 版本里修复了。你可以 npm uninstall @vue/cli-service && npm install @vue/cli-service --save-dev ,以下是网上更为流传的办法,可以在不升级的前提下修复这个问题。这个问题不针对特定项目,是 vue/cli-service 的 bug !

1、修改根目录下:vue.config.js 将

devServer: {
  port: port,
  open: true,
  overlay: {
    warnings: false,
    errors: true
  },
  before: require('./mock/mock-server.js')
},

改为:

devServer: {
  port: port,
  open: false,
  overlay: {
    warnings: false,
    errors: true
  },
  before: require('./mock/mock-server.js')
},

没错,只改这里的 open,open 由 true 改为 false 即可。

2、接着,修改 根目录下 package.json 里 vue-cli-service serve 为 vue-cli-service serve --open

至此,输入 npm run dev 并回车后,不会再打开标签页,构建完毕,会打开新标签页,完美解决了问题。

关于具体原因可查看 github:vue-cli may open browser twice auto if I set 'devServer.open' : true

本博客若无特殊说明则由 full-stack-trip 原创发布
转载请点名出处:全栈之旅 > vue-admin-template 打开两次浏览器的问题
本文地址:https://www.kpromise.top/fix-vue-admin-template-open-twice-browser-tab/

发表评论

电子邮件地址不会被公开。 必填项已用*标注