Vue.config.js 配置报错 ValidationError: Invalid options object

713 阅读1分钟

image.png

这段报错信息意思是Dev Server已使用与API模式不匹配的选项对象初始化,其中明确指出是属性 disableHostCheck,于是我屏蔽了这个属性,发现能启动成功

此时我查看了之前和这次的项目的webpack的版本发现这次的版本是 webpack5 之前是webpack4,并且查看了webpack的文档发现

image.png

disableHostCheck 这个属性在webpack4中已经被删除替换,webpack5中已经不存在这个属性了,所以配置这个会报错,正确做法是替换成allowedHosts

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    //基本路径
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    //输出目录
	outputDir: 'dist',
	//指定生成的文件
	indexPath: 'index.html',
	//vue兼容ie
	transpileDependencies: true,
	//是否启用eslint验证
	lintOnSave: false,
	//开发环境配置
	devServer: {
	    //允许别人访问自己的ip地址
		host: '0.0.0.0',
            allowedHosts: "all",
            //代理配置
		proxy: {
            '/api': {
                target: 'https://192.168.x.xxx:8080/',//接口的域名
                ws: true,//是否代理websockets
                secure: false,//是否是https接口
                changeOrigin: true,//是否跨域
                pathRewrite: {//重写地址,将前缀/api转为""
                	'^/api': ""
                }
            }
        }
	}
})

移动端显示配置

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />