[JavaScript知识库]vue-cli vue.config.js之别名

在 vue.config.js 如下设置：

// 第一种写法
module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                // 给 @/assets 这个路径取别名 assets。
                // 以后当使用 v-bind 语法时使用 assets 就是调用 src/assets 这个路径，如<img :src="assets/">，其实就是<img :src="src/assets/">
                // 如果不使用 v-bind 语法时使用 assets 则需要在前面加 ~ ，如<img src="~assets/">，其实就是<img src="src/assets/">
                // 因为不使用 v-bind 语法只有加 ~ 才会认为是别名，否则会认为是字符串。
                'assets': "@/assets"  // @ 就是src(vue语法)
            }
        }
    }
}


// 第二种写法
// module.exports = {
//     configureWebpack: config => {
//         config.resolve.alias['assets'] = "@/assets"
//     }
// }

示例：

<template>
  <div class="home">
    <!--    默认的方法   -->
    <img alt="Vue logo" src="../assets/logo.png" title="Vue--logo">

    <!--    别名在 vue.config.js 里设置    -->
    <!--    如果不用v-bind，则在别名前面加 ~   -->
    <img alt="Vue logo" src="~assets/logo.png" title="Vue--logo">

    <!--    如果使用v-bind，则直接使用别名   -->
    <!--    使用v-bind导入本地文件时，一定要加 require 函数   -->
    <img alt="Vue logo" :src="require('assets/logo.png')" title="Vue--logo">
    <img alt="Vue logo" :src="src1" title="Vue--logo">
    <img alt="Vue logo" :src="src2" title="Vue--logo">

    <div class="a" title="aaaaaaaa"><p>aaa</p></div>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  data() {
    return {
      src1: require("assets/logo.png"),
      src2: require("@/assets/logo.png")  // @指src目录
    }
  },
  components: {
    HelloWorld
  }
}
</script>


<style>
.a {
  height: 100px;
  background-image: url("~assets/logo.png");  /*   这里也可以用  */
}
</style>

结果图(截了主要的部分)：