Vue-cli搭建的项目中路径别名的配置

路径别名配置分别有两种方式

首先展示一下项目结构 对照项目结构配置

在项目根目录下创建vue.config.js文件

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "assets": "@/assets",
        "common": "@/common",
        "components": "@/components",
        "network": "@/network",
        "views": "@/views"
      }
    }
  }
}

使用cli3.x创建的项目在配置路径别名时可以使用@代表src，在node_modules/@vue/cli-service/lib/config/base.js文件中已经配置好的

使用cli4.x创建的项目也可以进行以下配置

const path = require('path');//引入path模块
function resolve(dir){
  return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}

module.exports = {
  chainWebpack: (config)=>{
    config.resolve.alias          
    .set('components',resolve('src/components'))        
    .set('views',resolve('src/views'))        
    .set('assets',resolve('src/assets'))        
    .set('common',resolve('src/common'))        
    .set('network',resolve('src/network'))
    //set第一个参数：设置的别名，第二个参数：设置的路径　　　　    
  }
}