webapck优化——配置alias别名

配置别名

使用vue-cli开发项目，最大特色是组件化。组件中频繁引用其他组件或插件。我们可以把一些常用的路径定义成简短的名字。方便开发中使用。

//加载path模块
const path = require('path')
//定义resolve方法，把相对路径转换成绝对路径
const resolve = dir => path.join(__dirname, dir)

module.exports = {
    
    
  chainWebpack: config => {
    
    
    // 添加别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('api', resolve('src/api'))
      .set('views', resolve('src/views'))
      .set('components', resolve('src/components'))
  }
}

举个例子

配置前

 {
    
    
    path: '/',
    name: "Login",
      component: () => import('../views/login')
  },

配置后

 {
    
    
    path: '/',
    name: "Login",
    component: () => import('views/login')
  },

*** 小提示 ***

<img src="assets/img/05.jpg" alt="">// 图片不会出现

*** 修改后 ***

<img src="~assets/img/05.jpg" alt="">// ok

所有的webapck设置完后必须重启项目