在做完了项目之后,我们使用的很多资源文件,或者组件之间的引用的时候都是使用了相对路径,这样虽然能用,但是一旦文件移动位置,或者需要复制一个组件到其他目录的时候,就会出现路径无法识别的问题,所以,在项目中,我们还是更喜欢使用路径别名来固定常用的文件夹,这样移动或复制就不会出现找不到文件的问题。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
resolve: {
alias: {
// '@' 是 './src' 的别名,vue-cli 默认配置
'assets': '@/assets',
'components': '@/components',
'views': '@/views'
}
}
}
})
还有另外一个方式来命名
const path = require('path');
function resolve(dir) {
// 设置绝对路径
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack: (config) => {
config.resolve.alias
// set(别名, 路径)
.set('@', resolve('./src'))
.set('network', resolve('./src/network'))
}
}
打开 App.vue 文件,将我们之前的引用文件路径直接改为我们别名好的方式。比如
import TabBar from "components/tabbar/TabBar"
这里的 components 就是 ./src/components
TIP:在import中可以直接解析别名来使用,不过在非JS代码中,我们不能直接解析别名。这时候需要在别名前增加一个 “~” 符号来识别别名
<img slot="itemicon" src="~assets/img/news.png" alt="">
App.vue 完整代码
<template>
<div id="app">
<router-view></router-view>
<tab-bar>
<tab-bar-item path="/main">
<img slot="itemicon" src="~assets/img/news.png" alt="">
<img slot="itemiconactive" src="~assets/img/newsactive.png" alt="">
<div slot="itemname">主页</div>
</tab-bar-item>
<tab-bar-item path="/me">
<img slot="itemicon" src="~assets/img/me.png" alt="">
<img slot="itemiconactive" src="~assets/img/meactive.png" alt="">
<div slot="itemname">我的</div>
</tab-bar-item>
</tab-bar>
</div>
</template>
<script>
import TabBar from "components/tabbar/TabBar"
import TabBarItem from "components/tabbar/TabBarItem"
export default {
name:'app',
components:{
//调用的时候可以采用驼峰命名,但在使用的时候,由于html对大小写不明感,需要使用短横方式调用"tab-bar"
TabBar,
TabBarItem
}
}
</script>
<style>
@import "assets/css/global.css";
</style>