vuejs3.0 从入门到精通——Vite解决@问题

Vite 解决 @ 问题

  在Vue3和Vite中，@符号通常用于别名，指向src目录。这是Vue CLI项目的默认设置，但在Vite项目中，你需要手动配置这个别名。

  在Vite中，你可以在vite.config.js文件中配置别名。这是一个配置示例：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import VueDevTools from 'vite-plugin-vue-devtools'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    VueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

  在这个配置中，@别名被设置为指向src目录。这意味着你可以在项目中像这样使用@：

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

  这个配置应该放在你的项目根目录下的vite.config.js文件中。如果你没有这个文件，你可以创建一个。在配置文件中使用正确的路径，以确保你的别名设置正确。

  如果你是 ts 项目，还要修改 tsconfig.json文件。

  tsconfig.json文件，它是 TypeScript 的配置文件，用于指定 TypeScript 编译器应如何编译你的代码。tsconfig.json的baseUrl和paths配置是用于指定模块位置的，这与 Vite 的别名配置有所不同。

  Vite的别名配置使用resolve.alias选项，上面已经在配置文件中进行了相应的设置。

  如果正在使用 TypeScript，并且希望 TypeScript 能够正确解析模块路径，需要在tsconfig.json中配置baseUrl和paths。例如：

{
  "compilerOptions": {
    "baseUrl": ".", // 这将被解释为'root'目录
    "paths": {
      "@/*": ["src/*"] // 这里定义了'@'别名，指向'src'目录
    }
    // 其他编译选项...
  },
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

  这样，当在 TypeScript 代码中导入一个模块时，TypeScript 编译器将首先查看baseUrl所指定的目录，然后查看paths中指定的路径。例如，对于import @some/module from '@some/module'，TypeScript 编译器将首先查看当前目录下的src/some/module.ts文件。

  但是需要注意的是，TypeScript的baseUrl和paths配置主要是在TSLint或TypeScript的旧版本中使用的。在最新版本的 TypeScript 中，更推荐使用 ES6 的模块解析机制，即使用import和export语句来导入和导出模块。在这种情况下，你可能不需要在tsconfig.json中配置baseUrl和paths。