在 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>
结果图(截了主要的部分):