React+vite3.x实战配置

一、安装vite reacte（省略）
vite官网

二、安装sass

npm install --save-dev sass

任何以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件。
Vite 对 .scss, .sass, .less, .styl 和 .stylus 文件的提供了内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖。详情
引入scss文件

三、gzip压缩
3.1 安装@originjs/vite-plugin-commonjs为了不让compression-webpack-plugin报错

npm install @originjs/vite-plugin-commonjs compression-webpack-plugin @gfx/zopfli  --save-dev

optimizeDeps: {
    esbuildOptions: {
      plugins: [
        esbuildCommonjs([
          new CompressionPlugin({
            filename: "[path][base].gz",
            algorithm: "gzip",
            test: /\.js$|\.css$|\.html$/,
            threshold: 10240,
            minRatio: 0.8,
          }),
           new CompressionPlugin({
            filename: "[path][base].br",
            algorithm: "brotliCompress",
            test: /\.(js|css|html|svg)$/,
            compressionOptions: {
              params: {
                [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
              },
            },
            threshold: 10240,
            minRatio: 0.8,
          }),
        ])
      ]
    }
  },

四、配置 路径

resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },

五‘配置移动端自适应（pc也可以使用）
安装

npm i postcss-px-to-viewport

注意：scss less css不能有注释，否则报错

css: {
    postcss: {
      plugins: [
        postcssPxTtoViewport({
          unitToConvert: 'px',
          viewportWidth: 750,
          unitPrecision: 5,
          propList: ['*'],
          viewportUnit: 'vw',
          fontViewportUnit: 'vw',
          selectorBlackList: [],
          minPixelValue: 1,
          mediaQuery: false,
          replace: true,
          exclude: [],
          landscape: false,
        })
      ]
    },
  }

六、本地代理

  server: {
    port: 8080,
    proxy: {
      '/api: {
        target: 'http://****',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/is/, '')
      }
    }
  },

完整vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';
import { esbuildCommonjs } from '@originjs/vite-plugin-commonjs'
import CompressionPlugin from 'compression-webpack-plugin'
import zlib from 'zlib'
import postcssPxTtoViewport from "postcss-px-to-viewport"
export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        esbuildCommonjs([
          new CompressionPlugin({
            filename: "[path][base].gz",
            algorithm: "gzip",
            test: /\.js$|\.css$|\.html$/,
            threshold: 10240,
            minRatio: 0.8,
          }),
          new CompressionPlugin({
            filename: "[path][base].br",
            algorithm: "brotliCompress",
            test: /\.(js|css|html|svg)$/,
            compressionOptions: {
              params: {
                [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
              },
            },
            threshold: 10240,
            minRatio: 0.8,
          }),
        ])
      ]
    }
  },
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  css: {
    postcss: {
      plugins: [
        postcssPxTtoViewport({
          unitToConvert: 'px',
          viewportWidth: 750,
          unitPrecision: 5,
          propList: ['*'],
          viewportUnit: 'vw',
          fontViewportUnit: 'vw',
          selectorBlackList: [],
          minPixelValue: 1,
          mediaQuery: false,
          replace: true,
          exclude: [],
          landscape: false,
        })
      ]
    },
  },
  publicPath: "./",
  // 如果你不需要使用eslint，把lintOnSave设为false即可
  lintOnSave: false,
  // 打包时不生成.map文件
  productionSourceMap: false,
  //本地代理
  server: {
    proxy: {
      '/api': {
        target: 'http://xxx:8080/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

下一篇：配置react-router