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

news2024/11/26 0:26:49

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

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

然后进入项目里面，安装依赖项和启动项目，就可以正常打开项目了：

配置环境变量

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/, '')
      }

配置@别名使用

如果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" }]
}