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

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