首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 js配置@符作根路径

vue3 js配置@符作为根路径的详细代码示例

2025-05-20 10:02:44 作者：凉笙Drunk

这篇文章主要介绍了vue3 js配置@符作为根路径的相关资料,通过示例代码介绍了如何通过配置jsconfig.json/tsconfig.json及构建工具（Vite/Webpack）设置别名,使@符号指向src目录,简化模块导入路径,提升代码可读性和维护性,需要的朋友可以参考下

1. 配置 jsconfig.json

如果你使用的是 JavaScript，可以在项目根目录下创建一个 jsconfig.json 文件，并添加以下配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

2. 配置 tsconfig.json

如果你使用的是 TypeScript，可以在 tsconfig.json 文件中添加以下配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

3. 配置 Vite

如果你使用的是 Vite 作为构建工具，你还需要在 vite.config.js 或 vite.config.ts 中配置别名

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
});

4. 配置 Webpack

如果你使用的是 Vue CLI 或 Webpack，你可以在 vue.config.js 中配置别名：

const path = require('path');

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

5. 使用 @ 符号导入模块

配置完成后，你可以在项目中这样导入模块：

import MyComponent from '@/components/MyComponent.vue';

这样，@ 符号就会指向 src 目录，使得导入路径更加简洁和易读。

总结

通过配置 jsconfig.json 或 tsconfig.json 文件，并在构建工具（如 Vite 或 Webpack）中设置别名，你可以轻松地将 @ 符号配置为项目的根路径。这样可以简化模块导入路径，提高代码的可读性和维护性。

到此这篇关于vue3 js配置@符作为根路径的文章就介绍到这了,更多相关vue3 js配置@符作根路径内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！