vue3 js配置@符作为根路径

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）中设置别名，你可以轻松地将 @ 符号配置为项目的根路径。这样可以简化模块导入路径，提高代码的可读性和维护性。