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脚手架。
启动项目浏览器自启动失效自己手搓(终极解决方案)

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

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)
    vue 启动项目时浏览器自动启动的四个方案(三种类型)。_第1张图片
    vue 启动项目时浏览器自动启动的四个方案(三种类型)。_第2张图片

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}`)
        });
      }
    ],
  },
}

你可能感兴趣的:(vue,vue.js,javascript)