Vue.js - 04 配置 vue.config.js 的 devServer

环境

Ubuntu 版本信息：

$ lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 22.04 LTS
Release:	22.04
Codename:	jammy

Node.js 和 NPM 版本信息：

$ node --version
v16.15.0
$ npm --version
8.5.5

VS Code 版本信息：

Version: 1.66.2
Commit: dfd34e8260c270da74b5c2d86d61aee4b6d56977
Date: 2022-04-11T07:49:24.808Z
Electron: 17.2.0
Chromium: 98.0.4758.109
Node.js: 16.13.0
V8: 9.8.177.11-electron.0
OS: Linux x64 5.15.0-27-generic

配置 vue.config.js 的 devServer

该项目基于：Vue.js - 03 修改网站的图标

使用 VS Code 打开项目，修改 vue.config.js 文件，配置 devServer：

1. 设置 host 选项，指定主机；如果设置为 "localhost"，则只能被本机访问；如果想要被外部访问，则需设置为 "0.0.0.0"；
2. 设置 port 选项，指定一个端口号，并监听来自这个端口的请求；
3. 设置 https 选项，false 表示使用 HTTP;
4. 设置 open 选项，true 表示启动应用之后自动打开默认浏览器。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: "0.0.0.0", // Specify a host to use.
    port: 8888, // Specify a port number to listen for requests on.
    https: false, // By default, dev-server will be served over HTTP.
    open: true // Tells dev-server to open the browser after server had been started. Set it to true to open your default browser.
  }
})

如果配置无误，可以看到，当重启应用之后，Node.js 自动打开浏览器，并访问 http://0.0.0.0:8888/：

参考

Vue CLI > devServer

webpack > devServer.host

webpack devServer.https

webpack > devServer.open

webpack > devServer.port