vite搭建react项目以及基础配置

一、vite搭建react项目

1. 使用以下命令：

npm create vite@latest

2. 选择自己需要的：

3. 运行以下命令启动开发服务器：

  cd 12306
  npm install
  npm run dev

二、集成less

1. 安装less

npm install less -D
npm install less-loader -D

2. 在vite.config.js中配置：

css: {
    modules: {
      localsConvention: 'dashesOnly',//只保留中划线（kebab-case）格式的类名
    },
    preprocessorOptions: {
      less: {
        // 支持内联 JavaScript
        javascriptEnabled: true,
      }
    }
  },

3. 这样就可以将样式文件以.less结尾，并在.jsx文件中引入：

三、配置 alias 别名

1. 在vite.config.js中配置：

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

2. 在目录下创建jsconfig.json文件并配置：

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
    }
  }
}

四、配置 proxy 代理

1. 在vite.config.js中配置：

server: {
        port: 3000, // 开发环境启动的端口
        host: '0.0.0.0',
        // open: true, // 项目启动时自动打开浏览器
        proxy: {
            '/api': {
                target: 'http:xxxxxx', // 当遇到 /api 路径时，会将其转换成 target 的值
                changeOrigin: true,  // 如果接口跨域，需要进行这个参数配置
                // 一般情况下，配置上面两个即可
                // secure: false,      // 如果是 https 接口，需要配置这个参数
                // rewrite: path => path.replace(/^\/api/, '') // 将 /api 重写为空
            }
        }
    }

五、使用 react-router-dom 路由

请移步react-router-dom的基础使用这篇文章

OK了，先配置这么多吧