vue webpack alias 配置别名

vue-cli 2.0

 在 build\webpack.base.conf.js

const path = require('path');
function resolve (dir) {
    return path.join(__dirname, dir)
}
module.exports = {
  context: path.resolve(__dirname, '../'),
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'src': resolve('src'),
      '@': resolve('src'),
      'common': resolve('src/common'),
      'components': resolve('src/components'),
      'api': resolve('src/api'),
      'base': resolve('src/base')
    }
  },
}

 

vue-cli 3.0

在 vue.config.js

const path = require('path');
function resolve (dir) {
    return path.join(__dirname, dir)
}
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
    config.resolve.alias
      .set('$', resolve('src'))
      .set('assets',resolve('src/assets'))
      .set('components',resolve('src/components'))
      .set('Select',resolve('src/components/Select'))
      .set('layout',resolve('src/layout'))
      .set('base',resolve('src/base'))
    //   .set('static',resolve('src/static'))
  },
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    open: true,
    port: 8001,
    overlay: {
      errors: true,
      warnings: true
    }
  }
}

配置好别名后 在项目中使用时便可简写