vue3配置@别名

最新推荐文章于 2024-09-10 14:43:41 发布

暴怒的代码

最新推荐文章于 2024-09-10 14:43:41 发布

阅读量2k

点赞数 2

分类专栏： # vue3学习日常文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/c18559787293/article/details/134371492

版权

vue3学习日常专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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

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

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

一、vite.config.ts

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

import { defineConfig } from 'vite'
import { resolve } from 'path' //引入node的path模块 这里报错
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{//路径别名
    alias:{
      '@': resolve(__dirname,'./src')
    }
  },
})

二、tsconfig.Json

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

先检查tsconfig.json文件是否配置了。baseUrl 和 paths
{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": "./",  //是否配置baseUrl
    "paths": { //是否配置paths
      "@/*": ["src/*"]
        }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

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

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

yarn add @types/node -D

{
  "name": "my-vite-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "pinia": "^2.0.27",
    "pinia-plugin-persist": "^1.0.0",
    "vue": "^3.2.41"
  },
  "devDependencies": {
    "@types/node": "^18.11.11", //安装这个
    "@vitejs/plugin-vue": "^3.2.0",
    "typescript": "^4.6.4",
    "vite": "^3.2.3",
    "vue-tsc": "^1.0.9"
  }
}

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