Vue 验证文件是否存在
最近写项目时遇到一个情况:使用管理系统管理模块时,输入想要关联的组件时如果填写错误,会导致一些异常。
于是乎,找到了一个解决方法。
- 创建配置信息文件
如图在此处创建两个js文件
_import_development.js
_import_production.js
我这里内容写的是一样的
module.exports = file => () => import('@/views' + file + '.vue')
- 创建配置信息文件
页面里引入这个文件
const _import = require('@/router/_import_development.js')
- 检查文件存在方法定义
isFileExist() {
var filePath = this.formData.ModuleComponent;
try {
var isfile = _import(filePath);
return true;
} catch (e) {
if (filePath == "Layout") {
return true;
}
return false;
}
},
- 调用方法,由于此处用的是elementui的表单验证,所以自定义了一个验证规则,用法可以参考elementUI Fom
var checkFile = (rule, value, callback) => {
if (!value) {
return callback(new Error('组件不允许为空'));
}
setTimeout(() => {
var isExist = this.isFileExist();
if (!isExist) {
callback(new Error('系统检测到组件不存在!'));
} else {
callback();
}
}, 100);
};
- 总结
总体思路为模拟导出输入的组件地址,用try catch捕捉保存信息。由于导入时如果没有这个文件会导致报错,所以用此“曲线救国”的方式来解决这个需求。