使用vite创建Vue/React前端项目，配置@别名和Sass样式，又快又方便

男娘i 2023-10-14 15:59 9阅读 0赞

![388a8dafb29645c9804d763775ee0723.png][]

Vite官方网站：[Vite | 下一代的前端工具链][Vite _]

Vite 并不是基于 Webpack 的，它有自己的开发服务器，利用浏览器中的原生 ES 模块。这种架构使得 Vite 比 Webpack 的开发服务器快了好几个数量级。Vite 采用 Rollup 进行构建，速度也更快。

> 兼容性注意
> 
> Vite 需要 [Node.js][] 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

## 搭建一个 Vite 项目 ##

使用 NPM:

$ npm create vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

根据提示，填写项目名称和使用的框架

![7171c5db25254b5ab51295cf3fd0742e.png][]然后进入项目里面，安装依赖项和启动项目，就可以正常打开项目了： ![c599ad28991b476fa816dc49be23aeb2.png][]

## 配置环境变量 ##

vite 提供了开发模式和生产模式，这里我们可以建立 4 个.env文件，一个通用配置和三种环境：开发、测试、生产。

env文件中的**变量名**建议以**VITE\_APP**开头，和vue cli中的VUE\_APP相同 ，用法也一致

.env文件 通用配置 用来配置一些公用的，栗子：网页的title VITE\_APP\_TITLE=hello

.env.dev文件 开发环境配置 以api url为例 VITE\_APP\_PROXY\_URL=/api

.env.test文件 测试环境配置 以api url为例 VITE\_APP\_PROXY\_URL=/api

.env.prod文件 测试环境配置 以api url为例 VITE\_APP\_PROXY\_URL=/apiProd

在写api的时候可以这么使用

const baseUrl = import.meta.env.VITE_APP_PROXY_URL
    export const getTabList = (params) => {
      return axios({
        method: 'post',
        url: baseUrl + 'QueryTabReq',
        data: params
      })
    }

## 配置proxy代理 ##

vite.config.js中配置server

proxy: {
          '/api': {
            target: 'http://10.0.40.200:8979',
            ws: false,
            changeOrigin: true,
            rewrite: path => path.replace(/^\/api/, '')
          }

![06dddd893b574a6dac4a326704d94a0e.png][]

## 配置@别名使用 ##

如果path或者\_\_dirname报红，需要安装支持@types/node到本地 npm i @types/node -D

在vite.config.ts中配置

import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    import path from "path"
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [react()],
      resolve: {
        alias:{
          "@": path.resolve(__dirname, "src")
        }
      },
      server: {
        host: "",
        proxy: {
          "api/": {
            target: "",
            ws:false,
            changeOrigin: true,
            rewrite: path=> path.replace(/^\/api/, '')
          }
        }
      }
    })

配置了@别名之后去引入文件发现vcode没有智能提示，需要配置tsconfig.json：

{
        "compilerOptions": {
            "target": "ES2020",
            "useDefineForClassFields": true,
            "lib": ["ES2020", "DOM", "DOM.Iterable"],
            "module": "ESNext",
            "skipLibCheck": true,
    
            /* Bundler mode */
            "moduleResolution": "Node",
            "allowSyntheticDefaultImports": true,
            "resolveJsonModule": true,
            "isolatedModules": true,
            "noEmit": true,
            "jsx": "react-jsx",
    
            /* Linting */
            "strict": true,
            "noUnusedLocals": true,
            "noUnusedParameters": true,
            "noFallthroughCasesInSwitch": true,
            "baseUrl": "./",
            "paths": {
                "@": ["src"],
                "@/*": ["src/*"]
            }
        },
        "include": ["src"],
        "references": [{ "path": "./tsconfig.node.json" }]
    }

## 配置sass使用 ##

直接安装sass即可：

yarn add -D sass

然后写个scss文件试试：

![8e47665ee78049549b361d267926b664.png][]

效果出来了：![a0b1355ebea441ff86518db124dfa689.png][]

## 配置Antd组件库 ##

安装组件库，然后导入样式，然后使用

npm install antd --save

或者

yarn add antd

在main.ts中导入样式：![8212f843ae364c069cad7ac8508cb59b.png][]

然后在组件中使用：![f1673d57402841fab47821200586138b.png][]

效果展示：![3f4be7091647468c96f45160c76a4075.png][]

[388a8dafb29645c9804d763775ee0723.png]: https://img-blog.csdnimg.cn/388a8dafb29645c9804d763775ee0723.png
[Vite _]: https://cn.vitejs.dev/
[Node.js]: https://nodejs.org/en/
[7171c5db25254b5ab51295cf3fd0742e.png]: https://img-blog.csdnimg.cn/7171c5db25254b5ab51295cf3fd0742e.png
[c599ad28991b476fa816dc49be23aeb2.png]: https://img-blog.csdnimg.cn/c599ad28991b476fa816dc49be23aeb2.png
[06dddd893b574a6dac4a326704d94a0e.png]: https://img-blog.csdnimg.cn/06dddd893b574a6dac4a326704d94a0e.png
[8e47665ee78049549b361d267926b664.png]: https://img-blog.csdnimg.cn/8e47665ee78049549b361d267926b664.png
[a0b1355ebea441ff86518db124dfa689.png]: https://img-blog.csdnimg.cn/a0b1355ebea441ff86518db124dfa689.png
[8212f843ae364c069cad7ac8508cb59b.png]: https://img-blog.csdnimg.cn/8212f843ae364c069cad7ac8508cb59b.png
[f1673d57402841fab47821200586138b.png]: https://img-blog.csdnimg.cn/f1673d57402841fab47821200586138b.png
[3f4be7091647468c96f45160c76a4075.png]: https://img-blog.csdnimg.cn/3f4be7091647468c96f45160c76a4075.png