How to set the browser that opens after the vue project is started

During the development process of the Vue project, we usually use the services provided by webpack-dev-server or Vue-CLI to start the local development server. After these development servers are started, they will automatically open the default browser and visit the homepage of the project root directory. However, in some cases, we may need to open a specified browser at startup, such as if we want to use Chrome as the default browser during development.

So, how to set the Vue project to open the specified browser after it is started? It’s actually quite simple, and in this article we’ll introduce two methods to achieve this goal.

1. Use the configuration file that comes with vue-cli

In projects with Vue-CLI version 3.x or above, we can find a vue in the project root directory .config.js configuration file, which allows us to override and extend the default configuration. We can set the browser at startup by adding the following configuration to the file:

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

Here, we set the open configuration item to chrome, which means to use the Chrome browser at startup. We can also set the port number and other related devServer configuration items. After saving the modifications and starting the development server, the Chrome browser will automatically open and visit the homepage of the project root directory.

2. Use cross-env and open commands

If we need to set the startup time in Vue-CLI 2.x or other projects using webpack-dev-server For browsers, we can use the cross-env and open commands. First, we need to install the cross-env dependency in the project:

npm install cross-env --save-dev

Then, add the following command in the package.json file:

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

Here, we set the BROWSER configuration item to chrome , indicating to use the Chrome browser when starting. We also used the --open and --port options to set the browser to automatically open and the port number. Run the npm run dev command to start the development server, and the Chrome browser will automatically open and visit the homepage of the project root directory.

Summary

This article introduces two methods to set up the Vue project to open the specified browser after startup: using the configuration file that comes with vue-cli and the cross-env and open commands. No matter which method is used, we can conveniently use our favorite browser to preview and debug while developing.

The above is the detailed content of How to set the browser that opens after the vue project is started. For more information, please follow other related articles on the PHP Chinese website!