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

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

设置路径别名(CLI3)

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