Vue主动检测文件是否存在 模块管理用

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捕捉保存信息。由于导入时如果没有这个文件会导致报错，所以用此“曲线救国”的方式来解决这个需求。