开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

---

写在前面

上篇文章介绍了如何用TypeScript定义基础类型变量和类型断言，本篇文章介绍如何在vite+vue项目中配置别名、安装less、重置样式

用惯了vue-cli的@之后，来到vite+vue项目，发现这句代码import store from "@/store";居然报错，原来vite中需要手动配置别名，下面开始介绍如何在vite+vue项目中配置别名

配置别名

首先我们在vite.config.ts文件中添加如下代码：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 添加的

export default defineConfig({
  plugins: [vue()],
  base: './',
  resolve: {
    // 配置别名 添加的，这里只添加了一个别名，想配置更多别名就在这里再加条目即可
    alias: {
      '@': resolve(__dirname, './src'),
    }
  },
})

添加完代码后，发现path居然也报错，提示path不存在，所以还要加载path模块，我们通过npm来安装，在终端输入命令：npm install @types/node --save-dev，安装完后path不报错了，但是在使用过程中发现IDE不会智能提示路径，所以我们还需要配置tsconfig.json文件，在tsconfig.json的compilerOptions选项中加入以下代码：

"compilerOptions"： {
    ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
}

这样IDE就可以智能提示路径了

安装less和重置样式

在原来使用vue-cli创建的项目中习惯了使用less，所以在vite+vue项目中也用它

我们通过npm安装less，在终端输入命令：npm install less-loader less --save-dev

成功安装后就可以在代码中直接使用：

<style lang="less" scoped>
.home {
  font-size: 20px;
  color: red;
}
</style>

我看网上很多教程还要在vite.config.js中配置，我使用过程中是是不需要。

重置样式的代码还是通过css加上，在main.ts中添加如下代码：

import "./assets/css/reset.css"; // 重置样式

同时在assets目录下新建css文件夹，css文件夹下新建reset.css文件，reset.css文件代码如下：

* {
  margin: 0;
  padding: 0;
}

html,
body,

body {
  font-family: PingFangSC-Regular, PingFang SC, "Microsoft YaHei", "Helvetica Neue", Helvetica,
    "microsoft yahei", arial, STHeiTi, sans-serif;
}

a {
  text-decoration: none;
}

ul,
li {
  list-style: none;
}

如此就可以重置样式

写在最后

以上就是在vite+vue项目中配置别名、安装less、重置样式的过程