关于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
}
})
还是要多看文档,有时候升级了功能变化挺大的。