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

下面我将详细讲解如何在Vue项目中配置启动后自动打开浏览器的方法。

步骤 1：安装依赖包

首先要在项目中安装一个依赖包 opn，这个包可以在 Node.js 中打开网址或者文件。我们可以在控制台中使用以下命令：

npm install opn --save-dev

步骤 2：在 package.json 中配置启动脚本

我们需要在 package.json 中的 scripts 中添加一个 serve 的脚本命令，如下：

"scripts" : {
  "serve": "npm run build && opn http://localhost:8080"
}

这里的意思是，先运行 npm run build 命令进行打包，然后执行 opn http://localhost:8080 命令打开默认浏览器。

步骤 3：运行 npm run serve 启动项目

现在我们可以运行 npm run serve 命令，就会启动项目并自动在浏览器中打开 http://localhost:8080 页面了。

示例 1：Vue CLI

如果您使用的是 Vue CLI，可以在 vue.config.js 中添加以下代码：

const opn = require('opn')
module.exports = {
  devServer: {
    after: function(app, server) {
      opn('http://localhost:8080/')
    }
  }
}

这里的意思是，在启动开发服务器之后，在浏览器中自动打开 http://localhost:8080/ 页面。

示例 2：Webpack

如果您使用的是 Webpack，可以在 webpack.config.js 中添加以下代码：

const opn = require('opn')
module.exports = {
  devServer: {
    after: function(app, server) {
      opn('http://localhost:8080/')
    }
  }
}

这里的意思是，在启动开发服务器之后，在浏览器中自动打开 http://localhost:8080/ 页面。

以上就是关于Vue项目中如何配置启动后自动打开浏览器的完整攻略，希望能帮到你！