vue 實踐記錄

打包后使用相對路徑

在 build/webpack.prod.conf.js 的 output 節點添加配置：publicPath: './'

打包時使用shell復制文件

在入口 build/build.js 中使用.

1. 引入 shelljs庫 require('shelljs/global')
2. 使用示例: cp('-R', 'favicon.ico', config.build.assetsRoot)

不同環境使用不同模式加載路由( vue 開發環境不適用懶加載)

router目錄結構

• _import_production.js 代碼
  module.exports = file => () => import('@/views/' + file + '.vue')

• _import_testing.js 代碼
  module.exports = file => () => import('@/views/' + file + '.vue')

• _import_development.js 代碼
  module.exports = file => require('@/views/' + file + '.vue').default

• 路由中使用

const _import = require('./_import_' + process.env.NODE_ENV)
...
        component: _import('dashboard/index')
...

使用 require.context自動加載模塊

使用： const files = require.context(directory, useSubdirectories, regExp)

參數說明

• directory：說明需要檢索的目錄
• useSubdirectories：是否檢索子目錄
• regExp: 匹配文件的正則表達式

返回結果

files.keys(): 符合條件的文件路徑集合

使用

獲取當前目錄所有 js 文件並獲取導出模塊

const files = require.context('.', true, /\.js/)
const modules = {}
files.keys().forEach(key => {
  if (key === './index.js') {
    return
  }
  var mk = key.replace(/(^\.\/|\.js$)/g, '')
  var m = files(key)
  modules[mk] = Object.keys(m).reduce((s, e) => {
    if (e !== 'default') {
      s[e] = m[e]
    }
    return s
  }, m.default||{})
})
//console.log(modules)