小丞的博客

const fs = require('fs')
const path = require('path')

const paths = {}

function getStat(dir, resolve, reject) {
  fs.stat(path.resolve(dir), (eror, stats) => {
    if (eror) {
      // 防止死循环
      if (dir.split('.vue').length > 2) return

      typeof reject === 'function' && reject()
      return
    }
    typeof resolve === 'function' && resolve(stats.isFile(), stats.isDirectory())
  })
}

// 检测路由名与组件名是否一致
function checkName(dir, routeName) {
  getStat(
    dir,
    (isFile, isDir) => {
      if (isFile) {
        const content = fs.readFileSync(path.resolve(dir), 'utf-8')

        content.replace(/export default {.*\W*.*name: ['"](.+)['"].*/m, (str, $1) => {
          if ($1 !== routeName) {
            console.warn(`${dir} 路由名 ${routeName} 与组件名 ${$1} 不一致`)
          }

          // 直接替换为空字符串，避免重复匹配
          return ''
        })
      } else if (isDir) {
        checkName(dir + '/index.vue', routeName)
      }
    },
    () => {
      checkName(dir + '.vue', routeName)
    }
  )
}

function getRouteNameInReplace($1, $2, paths) {
  if (!$1 || !$2) return
  if (paths[$1]) {
    console.error(`存在同名路由: ${$1}, ${paths[$1]}, ${$2}`)
  } else {
    const dir = $2.replace('@', './src')
    paths[$1] = dir
    checkName(dir, $1)
  }
}

// 文件遍历方法
function fileDisplay(filePath) {
  // 根据文件路径读取文件，返回文件列表
  fs.readdir(filePath, (err, files) => {
    if (err) {
      console.warn(err)
    } else {
      // 遍历读取到的文件列表
      files.forEach(filename => {
        // 获取当前文件的绝对路径
        const filedir = path.join(filePath, filename)
        // 根据文件路径获取文件信息，返回一个fs.Stats对象
        getStat(filedir, (isFile, isDir) => {
          if (isFile) {
            // 读取文件内容
            const content = fs.readFileSync(filedir, 'utf-8')

            content
              // 路由表中 name 在 component 前面
              .replace(/name: ['"](.+)['"].*\W*.*component:.*\W*.*import\(.*\W*.*['"](.+)['"].*\W*.*\)/gm, (str, $1, $2) => {
                getRouteNameInReplace($1, $2, paths)

                // 直接替换为空字符串，避免重复匹配
                return ''
              })
              // 路由表中 name 在 component 后面
              .replace(/component:.*\W*.*import\(.*\W*.*['"](.+)['"].*\W*.*\).*\W*.*name: ['"](.+)['"]/gm, (str, $1, $2) => {
                getRouteNameInReplace($2, $1, paths)

                // 直接替换为空字符串，避免重复匹配
                return ''
              })
          } else if (isDir) {
            // 递归，如果是文件夹，就继续遍历该文件夹下面的文件
            fileDisplay(filedir)
          }
        })
      })
    }
  })
}

// 调用文件遍历方法
fileDisplay(path.resolve('./src/router'))

// src/utils/eventbus.js
import Vue from 'vue'

const eventbus = new Vue()

export default eventbus

// src/main.js
import Vue from 'vue'
import eventbus from '@/utils/eventbus'
Vue.prototype.$eventbus = eventbus

// src/routeGuard.js

/**
 * 由于 lazy-load-view 的影响导致组件内导航守卫不触发，在此通过 eventbus 实现自定义导航守卫
 * @author shawchen08
 */

import eventbus from '@/utils/eventbus'

// Note: 在需要监听 beforeRouteEnter 的组件中，需要在 created 中执行
// eventbus.$emit(`before${route}Enter`, to, from) 原因在于 afterEach 先于组件的生命周期钩子
// 执行，那么首次进入就不会未执行 beforeRouteEnter 的回调逻辑，因此需手动触发一次

// 需要 beforeRouteEnter 的路由
const routeEnterList = ['RouteA', 'RouteB']
const beforeRouteEnter = {}

routeEnterList.forEach(route => {
  beforeRouteEnter[route] = (to, from) => {
    eventbus.$emit(`before${route}Enter`, to, from)
  }
})

// 需要 beforeRouteLeave 的路由
const routeLeaveList = ['RouteC', 'RouteD', 'RouteE']
const beforeRouteLeave = {}

routeLeaveList.forEach(route => {
  beforeRouteLeave[route] = (to, from, next) => {
    eventbus.$emit(`before${route}Leave`, to, from, next)
  }
})

export { beforeRouteEnter, beforeRouteLeave }

// src/permission.js
import Vue from 'vue'
import router from './router'
import { beforeRouteEnter, beforeRouteLeave } from '@/routeGuard'
// ...

// ! Note: 由于 beforeEach 中有很多权限控制逻辑，
// ! 为了简单处理，我们在 beforeResolve 触发自定义 beforeRouteLeave 事件
router.beforeResolve((to, from, next) => {
  if (beforeRouteLeave[from.name]) {
    return beforeRouteLeave[from.name](to, from, next)
  }
  next()
})

router.afterEach((to, from) => {
  // 记录 to 和 from，组件内需要使用
  Vue.prototype.$beforeRouteEnterParams = { to, from }
  if (beforeRouteEnter[to.name]) {
    beforeRouteEnter[to.name](to, from)
  }
  // ...
})

// /xx dir/LazyLoadView.js
export default function LazyLoadView(AsyncView, needLoading = true) {
  // @see https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%A4%84%E7%90%86%E5%8A%A0%E8%BD%BD%E7%8A%B6%E6%80%81
  const AsyncHandler = () => ({
    // 需要加载的组件 (应该是一个 `Promise` 对象)
    component: AsyncView,
    // 异步组件加载时使用的组件
    loading: needLoading ? require('./LazyLoadLoading').default : null,
    // 加载失败时使用的组件
    error: needLoading ? require('./LazyLoadError').default : null
    // 展示加载时组件的延时时间。默认值是 200 (毫秒)
    // delay: 400,
    // 如果提供了超时时间且组件加载也超时了，则使用加载失败时使用的组件。默认值是：`Infinity`
    // timeout: 10000
  })

  return Promise.resolve({
    functional: true,
    render(h, { data, children }) {
      // 传递 context 的各种属性及 children 到视图组件.
      return h(AsyncHandler, data, children)
    }
  })
}

// /xx dir/LazyLoadLoading.js
export default {
  functional: true,
  render(h, context) {
    return <div>loading</div>
  }
}

// /xx dir/LazyLoadError.js
export default {
  functional: true,
  render(h, context) {
    return <div>error</div>
  }
}

// /src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import LazyLoadView from '/xx dir/LazyLoadView'

Vue.use(VueRouter)

// ...

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => LazyLoadView(import(/* webpackChunkName: "Home" */ '@/views/Home')),
    meta: { title: 'Home' }
  },

  {
    path: '/about',
    name: 'About',
    component: () => LazyLoadView(import(/* webpackChunkName: "About" */ '@/views/About')),
    meta: { title: 'About' }
  },

  //...

  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]
// ...

// src/store/index.js
...
const modulesFiles = require.context('./modules', true, /\.js$/)
const _initState = {}

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default

  // 备份初始状态，用于重置
  _initState[moduleName] = deepClone(value.default.state) // 深克隆，自己实现或直接用 lodash 的

  return modules
}, {})

const store = new Vuex.Store({
  state: {
    _initState
  },
  modules,
  getters,
  mutations: {
    // 定义全局的清理方法
    RESET_ALL_STATE(state, payload) {
      const initState = deepClone(state._initState)
      Object.keys(state).forEach(item => {
        if (item !== '_initState') {
          state[item] = initState[item]
        }
      })
    }
  }
})
...

// src/store/modules/user.js

...
const state = {}

const mutations = {}

const actions = {
  ...
  // user logout
  logout({ commit, state, dispatch }) {
    return new Promise((resolve, reject) => {
      ...
      // 清理所有状态
      commit('RESET_ALL_STATE', null, { root: true })
      resolve()
    })
  },
  ...
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

const exp = 60 * 60 * 24 * 1000 // 过期时间一天
const prefix = 'prefix_' // 前缀，主要用于避免冲突

/**
 * 读取值
 * @param {string} keyName    - 字段名
 * @param {any}    defaultVal - 默认值，在某些情况下非常有用，比如返回对象时可免除空值判断
 * @returns {any}
 */
export function getStoreValue(keyName, defaultVal = '') {
  const data = localStorage.getItem(prefix + keyName)

  if (data == null || data === '') {
    return defaultVal
  }
  
  try {
    const jsonData = JSON.parse(data)
    if (Date.now() - jsonData.time >= exp) {
      removeStoreValue(keyName)
      return defaultVal
    }
    return jsonData.value
  } catch (error) {
    return defaultVal
  }
}

/**
 * 写入值
 * @param {string} keyName - 字段名
 * @param {any}    value   - 待存储的值
 */
export function setStoreValue(keyName, value) {
  localStorage.setItem(prefix + keyName, JSON.stringify({ value, time: Date.now() }))
}

/**
 * 删除值
 * @param {string} keyName - 字段名
 */
export function removeStoreValue(keyName) {
  localStorage.removeItem(prefix + keyName)
}

// webpack.config.js

module.exports = {
...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
...
}

// webpack.config.js

module.exports = {
...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api' : '' } // remove base path
        // pathRewrite: { '^/api' : '/api/new-path' } // rewrite path
      }
    }
  }
...
}

// webpack.config.js

module.exports = {
...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false
      }
    }
  }
...
}

// webpack.config.js

module.exports = {
...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        bypass: function(req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
        }
      }
    }
  }
...
}

// webpack.config.js

module.exports = {
...
  devServer: {
    proxy: [{
      context: ['/auth', '/api'],
      target: 'http://localhost:3000',
    }]
  }
...
}

// webpack.config.js

module.exports = {
...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        changeOrigin: true
      }
    }
  }
...
}

// /config/dev.env.js
...
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"/"'
})

// /config/index.js
...
module.exports = {
  dev: {
    ...
    proxyTable: {
      '/api': {
        target: 'http://your-api-server:port/', // 后端服务地址
        changeOrigin: true
      }
    },
    ...
  },
  ...
}

// /config/index.js
...
module.exports = {
  dev: {
    ...
    proxyTable: {
      '/api': {
        // 通过命令区分后端服务地址和 mock 地址
        target: process.env.npm_config_api ? 'http://your-api-server:port/' : 'http://your-mock-server:port/',
        changeOrigin: true
      }
    },
    ...
  },
  ...
}

// 注：路径可能有所不同，下面的是我机器上的
// /usr/local/lib/node_modules/yapi-cli/src/commands/server.js
// line 91

...
// app.listen(9090)
app.listen(argv.port || 9090) // 支持 yapi server --port 9290
...