Vite official website: Vite | The next generation of front-end toolchain

Vite is not based on Webpack, it has its own development server utilizing native ES modules in the browser. This architecture makes Vite orders of magnitude faster than Webpack's development server. Vite is built using Rollup, which is also faster.

compatibility note

Vite requires Node.js version 14.18+, 16+. However, some templates require a higher version of Node to run properly. When your package manager warns you, please upgrade your version of Node.

Build a Vite project

Using NPM:

$ npm create vite@latest

Using Yarn:

$ yarn create vite

Using PNPM:

$ pnpm create vite

According to the prompt, fill in the project name and the framework used

Then enter the project, install dependencies and start the project, and you can open the project normally:

Configure environment variables

vite provides a development mode and a production mode, here we can create 4 .env files, a general configuration and three environments: development, testing and production.

The variable name in the env file is recommended to start with VITE_APP , which is the same as VUE_APP in vue cli, and the usage is also consistent

The general configuration of the .env file is used to configure some common ones, chestnut: the title of the web page VITE_APP_TITLE=hello

.env.dev file development environment configuration Take api url as an example VITE_APP_PROXY_URL=/api

.env.test file test environment configuration Take api url as an example VITE_APP_PROXY_URL=/api

.env.prod file test environment configuration Take api url as an example VITE_APP_PROXY_URL=/apiProd

You can use this when writing api

const baseUrl = import.meta.env.VITE_APP_PROXY_URL
export const getTabList = (params) => {
  return axios({
    method: 'post',
    url: baseUrl + 'QueryTabReq',
    data: params
  })
}

Configure proxy proxy

Configure server in vite.config.js

proxy: {
      '/api': {
        target: 'http://10.0.40.200:8979',
        ws: false,
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }

Configure @alias using

If the path or __dirname is red, you need to install support @types/node to local npm i @types/node -D

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

After configuring the @alias, go to import the file and find that vcode has no intelligent prompts, you need to configure 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" }]
}