vue如何自定义地址设置@

Vue是一个流行的JavaScript框架，有时需要使用自定义地址符号“@”来代替相对路径或绝对路径。以下是详细的步骤。

1. 在webpack配置文件中定义别名

由于Vue项目使用的是webpack作为构建工具，我们需要在webpack的配置文件中设置别名。打开webpack配置文件，找到alias选项，添加@别名，如下所示：

module.exports = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  // ...
};

这段代码的含义是将“@”设置为指向项目根目录下的“src”目录。这样在Vue组件文件中就可以使用“@”来引用“src”目录下的文件了。

1. 在Vue组件文件中使用@别名

我们可以在Vue组件文件中使用“@”别名，标识引入路径。以下是两个示例：

<template>
  <div>
    <img :src="imgUrl" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: '@/assets/images/logo.png', // 使用@别名
    }
  }
}
</script>

<template>
  <div>
    <p>Welcome to {{$route.name}}</p> // 在template中使用\$route.name来获取当前路由名称
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route); // 在mounted钩子函数中使用$this.\$route对象打印出当前路由信息
  },
}
</script>

在这些示例中，“@”别名成功地代替了相对路径或绝对路径，使代码更加简洁易读。

以上就是使用“@”别名自定义地址的完整攻略。