vite vue3 ts（一）初始化项目、设置alias别名

原创已于 2023-03-02 17:30:20 修改 · 973 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#学习 #vue.js #前端

于 2023-03-02 15:34:32 首次发布

本文介绍了如何在Vite构建的Vue3TypeScript项目中设置路径别名，通过安装依赖、修改vite.config.js和tsconfig.json文件，实现使用@来引入src目录下的文件，解决了不加.vue后缀的导入问题。

构建vite vue3 ts 项目

# yarn create vite my-vue-app --template vue

根据提示选择vue3 和ts

配置@路径别名

项目搭建成功后App.vue 如下

helloworld 通过./component引入

在这里插入图片描述

改成比较习惯的@别名试一下

会报错：

配置别名步骤

一、安装依赖

npm i @types/node -D

二、修改vite.config.js

关键代码截图
在这里插入图片描述

注意：vite 官方文档中不建议忽略 .vue 后缀的文，所以在 import 引入文件的时候需要加 .vue

关键代码（复制用）

import { resolve } from 'path'
  resolve: {
       alias: {
           "@": resolve(__dirname, 'src'), // 路径别名
       },
       extensions: ['.js', '.json', '.ts'] // 使用路径别名时想要省略的后缀名，可以自己 增减
   },

修改tsconfig.json

关键代码截图
在这里插入图片描述
关键代码（复制用）

"compilerOptions": {
        ...
        "baseUrl": ".", // 用于设置解析非相对模块名称的基本目录，相对模块不会受到baseUrl的影响
        "paths": { // 用于设置模块名到基于baseUrl的路径映射
            "@/*": ["src/*"]
        }
        ...
 }