在vue项目的开发过程中，我们通常会使用webpack-dev-server或者vue-cli提供的服务来启动本地开发服务器。这些开发服务器启动后，会自动打开默认浏览器，并访问项目根目录的首页。然而，有些情况下，我们可能需要在启动时打开指定的浏览器，比如我们希望使用chrome浏览器作为开发时的默认浏览器。
那么，如何设置Vue项目启动后打开指定的浏览器呢？其实很简单，在这篇文章中，我们将介绍两种方法来实现这个目标。
- 使用vue-cli自带的配置文件
在Vue-CLI 3.x版本以上的项目中，我们可以在项目根目录下找到一个vue.config.js的配置文件，该文件允许我们覆盖和扩展默认的配置。我们可以通过在该文件中添加如下配置来设置启动时的浏览器：
module.exports = {
devServer: {
open: 'chrome', // 设置启动时的浏览器
port: 8080 // 设置端口号
}
}在这里，我们将open配置项设置为chrome，表示启动时使用Chrome浏览器。我们还可以设置端口号，以及其他相关的devServer配置项。保存修改后，启动开发服务器，就会自动打开Chrome浏览器，并访问项目根目录的首页。
- 使用cross-env和open命令
如果我们需要在Vue-CLI 2.x或其他使用webpack-dev-server的项目中设置启动时的浏览器，我们可以使用cross-env和open命令。首先，我们需要在项目中安装cross-env依赖：
立即学习“前端免费学习笔记（深入）”；
大家都知道，在进行J2EE项目的开发过程中，在调试阶段如果只是修改了页面是不需要重启应用服务器的，比如不需要重启Tomcat。只需要在浏览器中 进行页面刷新即可。其实之所以不用重启Tomcat等应用服务器，其根本原因是因为我们可以在应用服务器的配置文件中设置虚拟目录，这样就可以知道web 项目所在的目录，于是就可以省去打包、然后再重新发布到服务器的步骤。感兴趣的朋友可以过来看看
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命令。无论使用哪种方法，我们都可以方便地在开发时使用自己喜欢的浏览器进行预览和调试。
