关于Vue开发环境下，如何使用域名访问项目

这几天正在学习vue，项目想测试一下使用域名访问，结果发现一直报header error。于是上网找了一轮资料，网上一般说的是几个办法：

1、配置vue.config.js，增加disableHostCheck
2、配置vue.config.js，在devServer中增加public:“域名”
但是发现都不生效……但是我一直记得之前我用过第2个方法是可以的啊，抓狂……
于是直接找vue-cli文档看，那边又叫跳到webpack去看，英文文档看着还是有点累……不过最终还是发现了方法

主要是通过配置vue.config.js进行，但是webpack版本不一样，配置方式也不一样：

1、webpack版本4及以下的环境下：

通过在devServer下增加public:"域名"即可：

// A code block
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: '服务器ip',
    port: '端口',
    public:'域名:端口',
    https:false,
    open:true
  }
})

// An highlighted block
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: '服务器ip',
    port: '端口',
    public:'域名:端口',
    https:false,
    open:true
  }
})

2、webpack版本5开始的环境下：

public已经停用，改为了使用allowedHosts:[“域名1”,“域名2”]：

// A code block
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: '服务器ip',
    port: '端口',
    allowedHosts:['域名'],
    https:false,
    open:true
  }
})

// An highlighted block
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: '服务器ip',
    port: '端口',
    allowedHosts:['域名'],
    https:false,
    open:true
  }
})

还是要多看文档，有时候升级了功能变化挺大的。