vue3配置@别名

本文介绍了在Vue3项目中使用Vite和TypeScript时，如何配置@别名以避免相对路径问题，包括在vite.config.ts和tsconfig.json中设置路径别名和baseUrl，以及安装@types/node的步

骤。

在项目开发中，通常我们是不写相对路径的，因为有些文件需要在不同的文件中使用，如果使用相对路径，那么我们每次去CV路径的时候就要重新修改。因此通常我们是写跟路径的，但是从头开始又太过于麻烦，因此我们使用 @ 别名来省略前面的路径。

        如果没有配置@，直接使用如 “@vitejs/plugin-vue”，则会报以下错误。接下来让我们来从零开始了解一下如何配置 @ 别名吧！

备注：本示例是  Vue3 + Vite + Ts

一、vite.config.ts

         进入根目录下，代码如下，即可配置 @ 别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{//路径别名
    alias:{
      '@': resolve(__dirname,'./src')
    }
  },
  server: {
    // 允许IP访问
    host: "0.0.0.0",
    // 应用端口 (默认:3000)
    port: 8888,
    // 运行是否自动打开浏览器
    open: true,
  },
})

二、tsconfig.Json

         接下来我们进入根目录下的 tsconfig.json 文件，查看是否配置 baseUrl 和 paths 这两个，如果没有的话则进行配置，代码如下：

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

三、安装 types/node 我这里用yarn add @types/node -D

        而后我们进入 package.json 文件，查看 devDependedcies 下是否存在 @types/node ，如果不存在的话我们需要手动进行安装

npm i @types/node -D 

项目即可正常启动，并且直接使用 @ 作为路径开头

最后在解决报红的问题

在vite-env.d.ts加入

declare module '@/*';