webpack配置 —— vue中的import xxx from '@/components/xxx'中的@

可以在 build -> webpack.base.conf.js里面配置

resolve: {
     
  extensions: ['.js', '.vue', '.json'],// 可以导入的时候忽略的拓展名范围
  alias: {
     
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),//这里就是别名了,比如@就代表直接从/src 下开始找起!!!
  }
},

更多请详见官方文档：webpack 2

在 vue-cli 3.0 版本：
如果 URL 以 @ 开头，它会默认作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 /src 的别名 @。(仅作用于模版中)

对于 vue ，在 vue.config.js 中配置

const path = require('path');

function resolve(dir) {
     
  return path.join(__dirname, dir);
}
module.exports = {
     
  lintOnSave: true,
  chainWebpack: (config) => {
     
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@assets',resolve('src/assets'))
      // 这里只写了两个个，你可以自己再加，按这种格式.set('', resolve(''))
  }
}