Vue如何配置路径别名

Vue如何配置路径别名

1、在vue.config.js中(如果没有vue.config.js可以在根目录下(与package.json同级)创建该文件)：

const path = require('path');//引入path模块
function resolve(dir){
    return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}
module.exports={
    chainWebpack:(config)=>{
        config.resolve.alias
        //set第一个参数：设置的别名，第二个参数：设置的路径
        .set('@',resolve('./src'))
        .set('components',resolve('./src/components'))
        .set('assets',resolve('./src/assets'))
        .set('network',resolve('./src/network'))
        //注意 store 和 router 没必要配置
　　　　
    },
}

2、重启项目后就可以在组建中使用别名啦

<template>
  <div id="app">

    <img :src="imgurl" alt="">
  </div>
</template>
export default {
  name: 'app',
  data(){
	  return{
		  imgurl:require('assets/image/1.jpg')
	  }
  }
}
</script>