[JavaScript知识库]vue 启动项目时浏览器自动启动的四个方案（三种类型）。

介绍：有多种方案 （vue-cli： vue的一个项目脚手架）；选一个吧，前三个不行直接第四个

1. 在 package.json 中配置 --open（2.x、3.x、4.x…都行）
2. vue-cli3.x以上也可在 vue.config.js 中配置
3. vue-cli2.x也可在 config 中配置
4. 当然你也可以手写个启动（使用场景就是配置了以上都不生效，那就自己搞一个）

1.在 package.json 中配置 --open（第一种方案）

package.json 中找到 script 中你启动项目的命令行  在后缀添加 --open
比如说以下我是以 dev（npm run dev）启动项目的，则在后面添加 --open

{
  "scripts": {
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev": "vue-cli-service serve --open"
  },
  "dependencies": {
  },
  "devDependencies": {
  },
}

2. 在 vue.config.js 中配置 devServer.open = true（第二种方案）

module.exports = {
  devServer: {
   	open: true,
  },
}

3. 如果项目是 vue-cli2.x构建的则在 config 中配置 （第三种方案）dev.autoOpenBrowser: true,

module.exports = {
  dev: {
  	 autoOpenBrowser: true,
  }
}

4. 手写（以node的opn模块来举例，在 vue.config.js 文件中加入如下代码）（第四种方案，终极方案）

如果只用启动 localhost 就行了，则以下代码

	const opn = require('opn'),port = 7315
	// 这里不加定时器也能不出意外启动；但是还是建议加一个定时器
	// opn(`http://localhost:${port}`)
	setTimeout(() => opn(`http://localhost:${port}`), 0);

如果以 ip 地址启动项目

	const opn = require('opn'),port = 7315;
	// 获取 ip 地址
	const getIPAdress = () => {
	  const interfaces = require('os').networkInterfaces();
	  for (let devName in interfaces) {
	    const iface = interfaces[devName];
	    for (let i = 0; i < iface.length; i++) {
	      const alias = iface[i];
	      if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) return alias.address
	    }
	  }
	}
	// 启动加一个定时器，避免启动浏览器出现尴尬界面（访问不到页面），虽然过一会儿它自己就重新加载了
	setTimeout(() => opn(`http://${getIPAdress()}:${port}`), 0);

1. 使用node的open模块： 跟上面一模一样，他们不同点在于第二个参数，咱没用第二参数。
2. 好像还有一些模块也能打开浏览器（重点就是能打开浏览器，其他任意了）
3. 当然，此操作不局限于vue-cli脚手架。

启动项目浏览器自启动失效自己手搓（终极解决方案）

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖