在 Vue 3 中设置 `@` 指向根目录的几种常见方法汇总

更新时间：2024年06月22日 14:52:01 作者：极梦网络无忧

在 Vue 3 项目开发中,为了方便管理和引用文件路径,设置 @ 指向根目录是一项常见的需求,下面给大家分享在Vue3中设置 `@` 指向根目录的方法汇总,感兴趣的朋友一起看看吧

方法一：使用 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 @指向根目录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue-cli打包后如何本地查看的操作
这篇文章主要介绍了Vue-cli打包后如何本地查看的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue中实现图片和文件上传的示例代码
下面小编就为大家分享一篇在vue中实现图片和文件上传的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue 处理跨域问题及解决方法小结
跨域问题的出现是因为浏览器的同源策略问题，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击，今天小编通过本文给大家介绍下vue 处理跨域问题，感兴趣的朋友一起看看吧
2021-09-09
浅谈VUE uni-app 模板语法
这篇文章主要介绍了uni-app 的模板语法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2021-10-10
vue3.2中的vuex使用详解
这篇文章主要介绍了vue3.2中的vuex使用详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
超全面的vue.js使用总结
Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。下面这篇文章主要给大家介绍了关于vue.js使用的相关总结,需要的朋友可以参考借鉴。
2017-02-02
Vue采用异步渲染的原理分析
对于Vue为何采用异步渲染，简单来说就是为了提升性能，因为不采用异步更新，在每次更新数据都会对当前组件进行重新渲染，为了性能考虑，Vue会在本轮数据更新后，再去异步更新视图，本文主要通过几个实例给大家介绍一下Vue为何采用异步渲染,需要的朋友可以参考下
2023-06-06
详解利用jsx写vue组件的方法示例
这篇文章主要给大家介绍了关于利用jsx写vue组件的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。
2017-07-07
详解webpack + vue + node 打造单页面(入门篇)
本篇文章主要介绍了详解webpack + vue + node 打造单页面(入门篇) ，非常具有实用价值，需要的朋友可以参考下
2017-09-09
vue项目引入antDesignUI组件实现
本文介绍了如何以Vue引入antDesignUI,主要包括下载安装、配置和引入组件等步骤,通过本文,读者可以快速了解antDesignUI在Vue中的应用,感兴趣的可以了解一下
2023-08-08