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

作者：System 时间：2024年08月12日分类：所有,vue.js 字数：1034

这篇文章距离上次修改已过262天，其中的内容可能已经有所变动。

在 Vue 3 中，你可以通过配置 compilerOptions 来设置 @ 指向项目的根目录。这通常在 vite.config.js 文件中进行配置，如果你使用的是 Vue CLI，则可能需要修改 Webpack 的配置。

以下是在 vite.config.js 中设置 @ 指向根目录的方法：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// 自定义别名
const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve('src'), // 设置 @ 指向 src 目录
    },
  },
});

在 Vue CLI 中，你需要修改 webpack.base.conf.js 文件：

// webpack.base.conf.js
const path = require('path');

module.exports = {
  // ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': path.resolve(__dirname, '../src'), // 设置 @ 指向 src 目录
    },
  },
  // ...
};

在 .vue 或 .js 文件中使用 @ 引用根目录下的文件：

// 在 .vue 或 .js 文件中
import SomeComponent from '@/components/SomeComponent.vue';

// 使用 SomeComponent

确保重启你的开发服务器或重新构建项目以使配置生效。

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

评论已关闭

推荐阅读