在开发vue的项目中,我们肯定需要对路径进行配置,因为在各个文件中,导入文件什么的,使用./
和 ../
这种格式的相对路径,就比较的烦,要对路径的结构相当的熟悉,而且难以维护。所以我们就要去设置别名(alias)
所以需要配置一个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('views',resolve('./src/views'))
.set('network',resolve('./src/network'))
//注意 store 和 router 没必要配置
}
}
html里引用静态文件:
<img src="~assets/img/tarbar/home.svg" >
url前面必须带有一个~
,否则无法访问到我存放在assets里面的资源!