Skip to content

使用@来替代src文件夹

使用@来替代src文件夹的配置方式为:

  • npm install -D path

  • npm install -d @types/node

  • vite.config.ts文件中进行别名的配置

    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')  // 用@代表src文件夹
        }
      }
    })

main.ts文件中使用@别名代替src文件夹,出现的报错问题:

一般情况下,我们需要对tsconfig.json文件进行配置,但是如果tsconfig.json文件内容是:

ts
{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
}

那我们就需要在tsconfig.app.json中添加:

ts
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

这样在main.ts文件中,就可以正常使用@别名了

Released under the MIT License.