在 Vue 3 中设置 `@` 指向根目录的几种常见方法汇总
更新时间：2024年06月22日 14:52:01 作者：极梦网络无忧
在 Vue 3 项目开发中,为了方便管理和引用文件路径,设置 @ 指向根目录是一项常见的需求,下面给大家分享在Vue3中设置 `@` 指向根目录的方法汇总,感兴趣的朋友一起看看吧
在 Vue 3 项目开发中，为了方便管理和引用文件路径，设置 @ 指向根目录是一项常见的需求。以下为您总结了几种常见的实现方式。
方法一：使用 Vite 配置（适用于 Vite 构建的项目）
- 在项目根目录创建
vite.config.js文件（若不存在）。 - 向该文件中添加以下配置：
import { defineConfig } from 'vite';
export default defineConfig({
resolve: {
alias: {
'@': '/',
},
},
});通过以上配置，在项目中使用 @ 即可表示项目根目录。
方法二：使用 Webpack 配置（适用于 Webpack 构建的项目）
- 确保已安装
vue-cli并创建了 Vue 3 项目。 - 在项目根目录找到或创建
vue.config.js文件。 - 在该文件中添加以下配置：
module.exports = {
publicPath: '/',
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('components', resolve('src/components'))
.set('views', resolve('src/views'));
},
}
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir);
}上述配置通过 chainWebpack 为常见的目录设置了别名，其中 @ 指向了 src 目录。
无论是使用 Vite 还是 Webpack 进行构建，设置好路径别名后，在项目代码中就可以更便捷地引用文件了。例如，在 Vue 组件的 JavaScript 代码中，可以使用 import xxx from '@/xxx' 来导入 src 目录下的模块；在 Vue 文件的 CSS 中，使用 ~@ 表示根路径，如 background: url("~@/assets/logo.png") 。
希望以上内容能帮助您在 Vue 3 项目中顺利设置路径别名，提高开发效率！
到此这篇关于在 Vue 3 中设置 `@` 指向根目录的几种常见方法汇总的文章就介绍到这了,更多相关Vue 3 @指向根目录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
<Teleport> 是 Vue 3 中引入的一个内置组件,用于将组件的内容渲染到 DOM 中的指定位置,而不受组件层级结构的限制,本文给大家介绍了Vue3使用Teleport解决组件间css层级问题的最佳实践,需要的朋友可以参考下2025-02-02
vue中使用better-scroll实现滑动效果及注意事项
这篇文章主要介绍了vue中使用better-scroll实现滑动效果，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了js 实现拖拽排序，拖拽排序对于小伙伴们来说应该不陌生，平时工作的时候，可能会选择使用类似Sortable.js这样的开源库来实现需求。但在完成需求后，大家有没有没想过拖拽排序是如何实现的呢？感兴趣得话一起来看看下面文章得小心内容吧2021-11-11
最近vue.js 非常火热，小编也趁机学习了下vuejs的一些基础知识，于是尝试做一个像微信平台里的菜单编辑器功能，下面脚本之家小编把vue.js 微信公众号菜单编辑器功能的实现代码分享给大家，需要的朋友参考下2018-05-05
这篇文章主要介绍了vue3中Vant的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了spring-cloud-stream的手动消息确认问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要为大家详细介绍了如何使用vue3.2 + elementPlus + pinia 实现多页签导航,文中的示例代码讲解详细,有需要的小伙伴可以参考一下2023-12-12
这篇文章主要为大家介绍了vue px转rem配置，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
最近开发遇到一个问题,修改对象某一个索引对象时,直接将对象赋值给数组的某一索引对象,该数组没变化,在 Vue 中,直接修改对象数组中某个对象的属性值时,数组的引用本身未改变,本文介绍了详细的原理分析和解决方案,需要的朋友可以参考下2025-03-03
这篇文章主要介绍了vue中 $emit的用法，通过实例代码给大家介绍了子组件和父组件的相关知识，需要的朋友参考下吧2018-04-04
最新评论