vue3 learning road - automatically open the browser and server configuration when the project starts

Table of contents

Automatically open the browser when the project starts

Server configuration instructions

Error when configuring server

The configuration of automatically opening the browser when the vue2 project starts

---

Under normal circumstances, the newly created project will not automatically open the browser after executing the npm run dev command. For convenience, you can set the browser to automatically open when the project starts.

Automatically open the browser when the project starts

method one:

In the package.json folder, add --open after the dev and build commands, and re-execute the npm run dev command.

  "scripts": {
    "dev": "vite --open",
    "build": "vite build --open",
    "preview": "vite preview"
  },

 Method Two:

Configure the server in the vite.config.js file

export default defineConfig({
  plugins: [vue()],
  server: {
    host: '127.0.0.1',
    port: '8888',
    open: true,
    https: false
  },
})

Server configuration instructions

  server: {
    host: '127.0.0.1',// 指定服务器应该监听哪个 IP 地址
    port: '8888', // 指定开发服务器端口
    strictPort: false, // 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
    open: true, // 开发服务器启动时，自动在浏览器中打开应用程序
    https: false // 是否开启 https
  },

ps: The proxy configuration will be explained separately later.

Error when configuring server

1、Error: getaddrinfo ENOTFOUNDlocalhost.my.com
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:71:26)

Or the following error is reported:

You can modify the hhosts file. The location of the hosts file: C:\Windows\System32\drivers\etc

The name to be accessed can be configured in the hosts file

Then after running the project, the host name will be changed to the configured name.

 

The configuration of automatically opening the browser when the vue2 project starts

The vue2 project needs to be set up in the config folder. The setting method is as follows:

autoOpenBrowser: true