vue 用别名取代路径引用

在项目开发过程中有可能很多包是没有放在npm上的,许多包需要下载到本地引用,这样一来我们只能通过require的方式来引用文件,但是路径的名字就会很长

例如

import Select from '../../bower_commonents/bootstrap-select/dist/js/select'

这种引用方式违背了CommonJS的编程规范,这些长路径我们可以通过webpack的resolve 配置项来解决。

在weboack.base.config.js中加入以下别名的定义:

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'bs-select': 'bower_components/bootstrap-select/dist/js/selsect.js'
    }
  }
}

 有了上面的这个定义之后,我们就可以把之前的引用改为

import Select from 'bs-select'

 

posted @ 2018-10-29 11:04  Ralapgao  阅读(5127)  评论(0编辑  收藏  举报