Vue 开发 - webpack配置路径映射

在 vue/cli 中经常会遇到引用模块/公共组件的情况，例如

// 假设我们的目录结构为这样子

├── src    
│   ├── assets
│   ├── common
│   │   ├── js
│   │   │   ├── api.js
│   ├── components
│   ├── router
│   ├── views
│   │   ├── product
│   │   │   ├── product.vue  
│   │   │   ├── list 
│   │   │   │   ├── list.vue 

在 product.vue 和 list.vue 页面内引用 api.js 会这样写：

// product.vue
import API  from '../../common/js/api.js'
// list.vue
import API  from '../../../common/js/api.js'

那么会存在问题：引用路径较长，路径不统一

如果在 webpack.base.conf.js 设置了 alias 后：

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      '@common': resolve('src/common')
    }
  },

我们的路径引用就变得简单整洁方便了许多：

// product.vue
import API  from '@common/js/api.js'
// list.vue
import API  from '@common/js/api.js'

这样一来后续需要更改 api.js 路径，对应修改配置即可

值得注意的是，在 vue/cli 3.0+ 的版本中，和原来的版本有一定的区别，应在 vue.config.js 中添加：

configureWebpack: {
    resolve: {
      alias: {
        '@assets': '@/assets',
        '@components': '@/components',
        '@common': '@/common',
        '@views': '@/views'
      }
    }
  }

我的主页
http://liguoyou.gitee.io/your

资料参考：
https://blog.csdn.net/u013025674/article/details/87775913