vue项目webpackDevServer.host配置及本地修改

2021-04-23 1,258 阅读1分钟

最近接手了一个别人的项目，遇到一个坑。npm run dev后,提示的不再是localhost:8080,最主要的是浏览器还无法访问该地址，查了很多文档也没找到原因。最后问以前维护的同事才搞定。

```
    App running at:
      Local:   http://aa.bb.com:8080/ 
      Network: http://aa.bb.com:8080/ 
```

指定webpackDevServer主机域名，通过配置项 devSerser.host = 'aa.bb.com'

  devServer: {
    port: 60801, // 指定端口
    open: true, //设置true为打开默认浏览器
    host: 'aa.bb.com', // 
    proxy: {
        '/xxx': {
            target: "http://aa.bb.com", // 代理
        },
  },

配置好后，此时webpackDevServer启动后，无法访问 aa.bb.com的服务。
原因是没有配置本地的hosts文件，在本地hosts文件中，增加加下内容
```
   # 备注: 访问127.0.0.1 即访问 aa.bb.com
   127.0.0.1  aa.bb.com
```
重启电脑，打开项目, npm run dev || npm run serve , 世界重新美好了