vite构建react移动端项目，基础配置

insist_life

已于 2024-04-06 23:51:42 修改

阅读量765

点赞数 16

文章标签： react.js 前端前端框架

于 2024-03-01 18:15:04 首次发布

本文链接：https://blog.csdn.net/insist_life/article/details/136402542

版权

仅供练习，以下配置没有应用到实际项目中。

1、构建react项目

2、在创建好的项目中安装初始依赖

3、因为是移动端H5项目，需要配置响应式插件

b.在main.tsx中引入“amfe-flexible”

1、构建react项目

npm init vite@latest

然后根据提示定义项目名称、项目需要使用的js库（react、vue等）、项目的开发语言（js、ts等）；

2、在创建好的项目中安装初始依赖

npm i /npm install

3、因为是移动端H5项目，需要配置响应式插件

可参考博客：https://blog.csdn.net/Armof/article/details/131102279

一、autoprefixer

根据 can i use 网站提供的兼容性表格，自动添加适合各种浏览器的前缀。即下图：

二、amfe-flexible

是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。

三、postcss-pxtorem

是PostCSS的插件，用于将像素单元px生成rem单位。

配置步骤：

a.安装依赖

npm i postcss postcss-pxtorem amfe-flexible autoprefixer --save

补充：在ts版本中安装一下postcss-pxtorem的类型文件

npm i --save-dev @types/postcss-pxtorem

笔者安装的版本分别是：postcss：^8.4.35、 postcss-pxtorem：^6.1.0、amfe-flexible：^2.2.1、autoprefixer：^10.4.17；

b.在main.tsx中引入“amfe-flexible”

//main.tsx

import 'amfe-flexible'

c.在vite.config.ts配置

//vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import autoprefixer from "autoprefixer";
import postCssPxToRem from "postcss-pxtorem";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [
        //自动补充前缀
        autoprefixer({
          overrideBrowserslist: [
            "Android 4.1",
            "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            "ie >= 8",
          ],
        }),
         //单位转化
        postCssPxToRem({
          // rootValue: 75, // 75表示750设计稿，37.5表示375设计稿
          //@ts-expect-error 这里不做类型检测
          rootValue({ file }) {
            // 项目中使用的 antd官方社区的 antd-mobile 组件库。这里做了区分，如果样式文件命中有 antd-mobile 则以 375 样稿转化。这里不做区分，那么 antd-mobile 各组件样式会变形。
            return file.indexOf('antd-mobile') !== -1?37.5:75
          },
          propList: ["*"], // 需要转换的属性，这里选择全部都进行转换
          selectorBlackList: ["norem"], // 过滤掉norem-开头的class，不进行rem转换
        }),
      ],
    },
  },
});

4、配置别名，方便文件引入。

参考博客：别名配置

a.安装node的声明文件

 npm i  @types/node -D

b.在tsconfig.json

在该配置文件中配置@符号，以便vscode（笔者是用该编辑器开发）“认识”

{
  "compilerOptions": {
    // 让vscode识别该符号
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

c.在vite.config.ts

在该文件中配置，以便vite能“认识”@符号

import { defineConfig } from 'vite';
import react from "@vitejs/plugin-react";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  // 让vite认识@符号
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

5、配置sass

方便样式开发

a.安装依赖

npm i sass -D

b.在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()],
  css: {
    // postcss的一些配置
    // ...

    //配置scss 
    preprocessorOptions: {
      scss: {
        // 表示在src下的assets文件夹下的scss文件夹下有个 normal.module.scss 文件，在该文件中定义了一些通用的样式，全局样式
        additionalData: `@import "${path.resolve(__dirname,"src/assets/scss/normal.module.scss")}";`,
        javascriptEnabled: true,
      },
    },
  },
});

注：如果上面的 additionalData: `@import "${path.resolve(__dirname,"src/assets/scss/normal.module.scss")}";`,

这种写法，导致项目运行时报错，那么可以将绝对路径改为相对路径，即additionalData:`@import "./src/assets/scss/normal.module.scss";`

好了，以上就是目前基础的配置，后续如有新增，定当及时补充。如有更高的建议，可留言！