您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— 路径别名

《和小米一起学Vue.js》— 路径别名

[ 孤狼 | 2023-01-09 12:03:07 | Vue | 1650°C | 0条评论 ]

在做完了项目之后,我们使用的很多资源文件,或者组件之间的引用的时候都是使用了相对路径,这样虽然能用,但是一旦文件移动位置,或者需要复制一个组件到其他目录的时候,就会出现路径无法识别的问题,所以,在项目中,我们还是更喜欢使用路径别名来固定常用的文件夹,这样移动或复制就不会出现找不到文件的问题。


设置路径别名(CLI3)

打开项目目录下的 vue.config.js 增加一个 configureWebpack 设置
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>


代码下载

下载地址:  密码:ed5q


转载请注明出处:http://gl.paea.cn/n.php?n=207
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索