Vue+Webpack如何指定热重载服务器的自定义域名与端口？

当然可以实现！你只需要在现有的webpack配置中添加devServer配置项，就能自定义服务器的主机地址、端口，甚至启用HTTPS支持。下面是具体的修改方案和完整配置示例：

关键配置项说明 #

• host: 设置你想要的自定义域名，比如hotreload.com。注意：你需要在本地hosts文件中将该域名指向127.0.0.1，否则浏览器无法解析这个域名
• port: 指定服务器监听的端口，比如3000
• https: 设置为true即可启用HTTPS，webpack-dev-server默认会生成自签名证书用于开发环境，如果你有自定义证书也可以额外配置证书路径（开发环境用默认自签名证书足够）

修改后的完整webpack配置 #

'use strict'
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	mode: 'development',
	entry: [ './src/app.js' ],
	module: {
		rules: [ { test: /\.vue$/, use: 'vue-loader' } ]
	},
	plugins: [
		new VueLoaderPlugin(),
		new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true })
	],
  // 添加devServer配置项
  devServer: {
    host: 'hotreload.com',
    port: 3000,
    https: true,
    hot: true // 确保热重载功能正常开启（默认应该是开启的，但显式声明更稳妥）
  }
}

额外注意事项 #

1. 修改hosts文件：

   • Windows系统：打开C:\Windows\System32\drivers\etc\hosts，添加一行 127.0.0.1 hotreload.com
   • Mac/Linux系统：打开/etc/hosts，添加同样的内容
     修改后需要保存文件（Windows可能需要管理员权限）

2. 浏览器安全提示：因为使用的是自签名证书，浏览器访问https://hotreload.com:3000时会提示“不安全”，这是正常现象，你可以选择继续访问或者将证书添加到浏览器信任列表中。

内容的提问来源于stack exchange，提问作者janedoe