怎么设置vue项目启动后打开的浏览器

在vue项目的开发过程中，我们通常会使用webpack-dev-server或者vue-cli提供的服务来启动本地开发服务器。这些开发服务器启动后，会自动打开默认浏览器，并访问项目根目录的首页。然而，有些情况下，我们可能需要在启动时打开指定的浏览器，比如我们希望使用chrome浏览器作为开发时的默认浏览器。

那么，如何设置Vue项目启动后打开指定的浏览器呢？其实很简单，在这篇文章中，我们将介绍两种方法来实现这个目标。

1. 使用vue-cli自带的配置文件

在Vue-CLI 3.x版本以上的项目中，我们可以在项目根目录下找到一个vue.config.js的配置文件，该文件允许我们覆盖和扩展默认的配置。我们可以通过在该文件中添加如下配置来设置启动时的浏览器：

module.exports = {
  devServer: {
    open: 'chrome', // 设置启动时的浏览器
    port: 8080 // 设置端口号
  }
}

在这里，我们将open配置项设置为chrome，表示启动时使用Chrome浏览器。我们还可以设置端口号，以及其他相关的devServer配置项。保存修改后，启动开发服务器，就会自动打开Chrome浏览器，并访问项目根目录的首页。

2. 使用cross-env和open命令

如果我们需要在Vue-CLI 2.x或其他使用webpack-dev-server的项目中设置启动时的浏览器，我们可以使用cross-env和open命令。首先，我们需要在项目中安装cross-env依赖：

立即学习“前端免费学习笔记（深入）”；

笔目鱼英文论文写作器

写高质量英文论文，就用笔目鱼

87

查看详情

npm install cross-env --save-dev

然后，在package.json文件中添加如下命令：

{
  "scripts": {
    "dev": "cross-env BROWSER=chrome webpack-dev-server --open --port 8080"
  }
}

在这里，我们将BROWSER配置项设置为chrome，表示启动时使用Chrome浏览器。我们还使用了--open和--port选项设置浏览器自动打开和端口号。运行npm run dev命令启动开发服务器，就会自动打开Chrome浏览器，并访问项目根目录的首页。

总结

本文介绍了两种方法来设置Vue项目启动后打开指定的浏览器：使用vue-cli自带的配置文件和cross-env与open命令。无论使用哪种方法，我们都可以方便地在开发时使用自己喜欢的浏览器进行预览和调试。

以上就是怎么设置vue项目启动后打开的浏览器的详细内容，更多请关注php中文网其它相关文章！