vue 启动项目时浏览器自动启动的四个方案（三种类型）。

admin 管理员组

文章数量: 887019

介绍：有多种方案 （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脚手架。

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

既然都自己手写了，那肯定会有点问题的！

1. 问题一

1. 比如说你运行 npm run build的时候你会发现它也会启动浏览器；如何禁止呢？
2. 让我们在 webpack 中添加一个插件（当然你也可以不用添加插件–只要区分是运行环境和打包环境就行了）
3. 以vue项目举例子：在插件中添加一个空函数，函数内写入判断依据（运行环境则启动咱们的打开浏览器操作，如果不是则不起动）
4. 这样一个简单的webpack插件就写好了，意外不，居然学习到了一个插件的使用。
5. process.env这个是环境变量（具体实现好像是一个插件实现的，它会读取你项目根目录下的.env.development和.env.production等文件）（process这个是node环境的全局变量等同于浏览器window）
6. webpack模式下的话是使用webpack… --mode=development…；有兴趣的小伙伴可以去了解一下
7. () => process.env.NODE_ENV === ‘development’ && setTimeout(() => opn(http://localhost:${port}), 0)
   
   

2.优化（更替为正经点的webpack插件）（以vue举例，其他的webpack直接扔到plugin里面就行了）

const opn = require('opn'),port = 7315;

module.exports = {
  devServer: {......},
  configureWebpack: {
    plugins: [
      function openBrowser(compiler) {
        let init = false;
        compiler.hooks.done.tap('open', () => {
          if (init) return;
          init = true;
          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
              }
            }
          }
          opn(`http://${getIPAdress()}:${port}`)
        });
      }
    ],
  },
}

3. 去除opn模块（有的项目中并没有这个模块，但是又不想下载依赖）

const { exec } = require('child_process');
const os = require('os');
const port = '7315'

const openWebUrl = (url) => {
  const type = os.platform();
  switch (type) {
    case 'win32': // windows
      exec(`start ${url}`);
      break;
    case 'darwin': // ios
      exec(`open ${url}`);
      break;
    default: // linux
      exec(`xdg-open ${url}`);
  }
};

function openBrowser(compiler) {
  let init = false;
  compiler.hooks.done.tap('open', () => {
    if (init) return;
    // 只有在 development 环境才执行，避免打包的时候触发（可以看看你自己项目获取当前环境变量是哪一个.）
    if (process.env.NODE_ENV !== 'development') return;
    init = true;
    const getIPAdress = () => {
      return 'localhost';
      // 以下为ip获取方式（如果需要ip打开的话把上面return去掉，不然以下代码无效）
      const interfaces = os.networkInterfaces();
      for (const 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;
        }
      }
    };
    openWebUrl(`http://${getIPAdress()}:${port}`);
  });
};

module.exports = {
  devServer: {......},
  configureWebpack: {
    plugins: [
      openBrowser
    ],
  },
}

本文标签： 三种 自动启动 浏览器 类型 方案