vite2.0搭建react项目配置

记录使用vite 2.0 搭建react项目的过程。
主要功能有：

• css/less/sass module
• pxtovw px单位自动转化为vw单位
• autoprefixer css兼容性添加前缀
• legacy 代码兼容性插件
• alias 文件夹别名

---

1、拉取项目模板项目

先拉取vite 提供的 react typescript 模板，模板vite默认开启module.css/less/sass。 项目中文件名为xxx.module.css/less/sass的文件都会被处理成css module。

 yarn create vite my-vue-app --template react-ts

Vite 提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。项目中不需要安装特定的 Vite 插件，但必须安装相应的预处理器依赖：

# .scss and .sass
npm add -D sass

# .less
npm add -D less

# .styl and .stylus
npm add -D stylus

2、pxtovw

px自动转vw需要使用到postcss插件。

yarn add -D postcss-px-to-viewport

vite 内置了PostCss，支持使用任何有效的PostCss配置。我们可以在项目中创建postcss.config.js配置我们的插件。当然也可以使用vite.config.js 来配置我们的插件。

vite.config.js：

import pxtovw from "postcss-px-to-viewport"; // ++  添加插件导入
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [
        pxtovw({
          viewportWidth: 1080,
          viewportUnit: "vw",
        }),
      ],
    },
  }
});
// css.postcss 是vite 提供的配置postcss选项

3、Autoprefixer

Autoprefixer会根据当前浏览器支持的特性和属性为CSS添加前缀

yarn add -D  autoprefixer  

vite.config.js:

import autoprefixer from "autoprefixer"; // ++新增

export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [
        pxtovw({
          viewportWidth: 375,
          viewportUnit: "vw",
        }),
        autoprefixer(), // ++新增
      ],
    },
  }
});

4、Lagacy

一个浏览器兼容的插件、可以根据配置自动帮我们打一些补丁。

yarn add -D @vitejs/plugin-legacy

vite.config.js:

 plugins: [
    react(),
    // 新增下面的配置项
    legacy({
      targets: [
        "Android > 39",
        "Chrome >= 60",
        "Safari >= 10.1",
        "iOS >= 10.3",
        "Firefox >= 54",
        "Edge >= 15",
        "ie >= 11",
      ],
      additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
    }),
  ],

5、alias 文件夹别名

vue2经常使用的 @/components/... 使用方式。

vite.config.js:

import path from "path"; // 导入node的path模块
// 如ts提示错误是无法识别类型，需要安装一下node的类型定义文件
// yarn add -D "@types/node"
// 添加下面配置
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },

---

至此就完成基本的开发环境的搭建了。不过autoprefixer和lagacy两个插件在开发环境下并不需要启用。vite提供了对不同的环境下的环境变量提供配置,但在vite.config.ts中import.meta 为空对象，还未被vite初始化。那就只能使用node的环境变量了。

先将package.json文件中的scripts修改一下。

  "scripts": {
    "dev": "set NODE_ENV=development && vite",
    "build": "set NODE_ENV=production && tsc && vite build",
    "preview": "set NODE_ENV=production && vite preview"
  },

修改后完整的vite.config.js内容：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import pxtovw from "postcss-px-to-viewport";
import autoprefixer from "autoprefixer";
import path from "path";
import legacy from "@vitejs/plugin-legacy";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    process.env.NODE_ENV === "production" &&
      legacy({
        targets: [
          "Android > 39",
          "Chrome >= 60",
          "Safari >= 10.1",
          "iOS >= 10.3",
          "Firefox >= 54",
          "Edge >= 15",
          "ie >= 11",
        ],
        additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
      }),
  ],
  css: {
    postcss: {
      plugins: [
        pxtovw({
          viewportWidth: 375,
          viewportUnit: "vw",
        }),
        autoprefixer(),
      ],
    },
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

整完了接下来就可以搭建目录结构、安装路由、组件库，开发自己的项目了。

觉得对你有帮助就给个赞吧🙁