vue cli4 配置alias 和 providePlugin

    對於一些高頻次的複雜路徑模塊導入我們往往會對這個路徑設置一個別名，就像vue中的@代表着src一樣。同理，對於一些公共的變量或者方法，爲了簡化調用我們往往會通過providePlugin將他們設置成全局變量或者方法。

    首先我們來配置alias（在vue.config.js文件中配置)，下面把一個工具函數的地址配成了#util，以下是相關配置內容：

configureWebpack: {
  resolve: {
    symlinks: false,
    alias: {
      '#util$': path.resolve(__dirname, './src/util/index.js'),
    }
  }
}

    要想用path.resolve,別忘了在vue.config.js中導入path模塊，例如let path = require('path')。示例中在./src/util/index.js裏面有一些工具函數，這裏我們把工具函數所在的地址用別名#util表示，其中'#util$'中的$表示精準匹配，只有import from 的地址是#util時纔會被打包工具識別並替換成我們工具函數文件所在的地址。需要主要的是，工具函數所在的地址我們需要文件的絕對地址，這也是爲什麼我們用到了path.resolve的原因。配置完成後 import util from '#util' 就等同於 import util from "./src/util/index.js"了。對於工具函數模塊的導入，在導入路徑上已經簡化了不少了。

   接下來我們來配置providePlugin,目標是配置一個全局對象，和幾個全局方法：

configureWebpack: {
  plugins: [
    new webpack.ProvidePlugin({
      $number: [path.resolve(__dirname, './src/number.js')],
      $div: [path.resolve(__dirname, './src/number.js'), 'div'],
      $add: [path.resolve(__dirname, './src/number.js'), 'add']
    })
  ]
}

     這裏我們配置了一個全局對象$number, 和兩個全局的公共方法，從配置的地址可以看到這兩個方法都在number.js中。這裏我

 們以$div爲例， $div爲你的全局調用名,裏面的參數依次爲配置對象所在的文件絕對地址，需要配置的模塊內容。配置完以後，$div 相當於number.js中export 的div方法。$number相當於number.js export的所有內容。我們調用div方法就可以直接使用$div而不用再導入number.js模塊了。需要注意的就是使用providePlugin要引入webpack模塊，例如let webpack = require('webpack')

    下面是本示例完整的vue.config.js內容：

let path = require('path')
let webpack = require('webpack')
module.exports = {
  publicPath: '/',
  filenameHashing: true,
  productionSourceMap: process.env.NODE_ENV !== 'production',
  devServer: {
    port: 8077
  },
  configureWebpack: {
    resolve: {
      alias: {
        '#util$': path.resolve(__dirname, './src/util/index.js'),
      }
    },
    plugins: [
      new webpack.ProvidePlugin({
        $number: [path.resolve(__dirname, './src/number.js')],
        $div: [path.resolve(__dirname, './src/number.js'), 'div'],
        $add: [path.resolve(__dirname, './src/number.js'), 'add']
      })
    ]
  },
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'sass-admin'
    }
  }
}

    關於vue cli4 alias 和 providePlugin的配置到此就結束了，有任何疑問可與下方留言。