require.context在vue项目中运用

require.context是webpack暴露出来的方法，使用webpack或vue-cli搭建的项目都可以使用。

1.动态将components文件下的组件自动化注册为全局组件

main.js中

import Vue from "vue";

// 自动加载components目录下的 .vue 结尾的文件 第二参数是是否查询其子目录
const requireComponent  = require.context("./components", true, /.vue$/);

requireComponent.keys().forEach(fileName  => {
  const componentConfig = requireComponent(fileName);
 // 兼容 import export 和 require module.export 两种规范
  const ctrl = componentConfig.default || componentConfig;
  Vue.component(ctrl.name, ctrl);
});

2.动态导入router文件下的分模块的路由文件

routes.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routerAry = []
// 自动加载modules目录下的 .js 结尾的文件
const requireRouter  = require.context("./modules", true, /.js$/);

requireRouter.keys().forEach(fileName => {
    const routerConfig = requireRouter(fileName);
    routerAry.push(routerConfig);
})

const routes = [
    {
    path: '/login',
    component: load('login'),
    meta: {
      requireAuth: false,
      title: '登录'
    }
  },
  ...routerAry  
]

vue上线项目去除所有console.log打印日志

使用babel-plugin-transform-remove-console包来实现

npm i  babel-plugin-transform-remove-console -S

babel.config.js

const plugins = []
if (process.env.NODE_ENV != 'development') {
  plugins.push('transform-remove-console')
}
 
module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: plugins
}