webpack4 部署生产环境动态加载路由_import_production.js

小记:由于webpack4中动态import不支持变量方式,即import(@/views/${file}) 这种写法不再支持,使用这种写法会导致生产环境报错,动态加载时找不到对应的组件, 开发环境报错：Critical dependency: the request of a dependency is an expression，因此修改为 require 引入组件.

开发环境

module.exports = file => {
  file = file.indexOf("/views/") === 0 ? file.slice(7) : file;
  let obj;
  try {
    obj = require("@/views/" + file).default;
  } catch (e) {
    obj = require("@/views/404").default;
    console.log(
      `%c requireFile模块引入失败========>${e}`,
      "background:#ff1744 ; padding: 3px; border-radius: 0 3px 3px 0;  color: #fff"
    );
  }
  return obj;
};

生产环境

module.exports = file => resolve => {
  file = file.indexOf("/views/") === 0 ? file.slice(7) : file;
  let obj;
  try {
    obj = require(["@/views/" + file], resolve);
  } catch (e) {
    obj = require(["@/views/404"], resolve);
    console.log(
      `%c requireFile模块引入失败========>${e}`,
      "background:#ff1744 ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff"
    );
  }
  return obj;
};