SoFunction
Updated on 2025-04-03

A complete tutorial on Vite project construction and environment configuration

1. Package and build

Vite uses Rollup as the default build tool. By running the npm run build command, Vite packages the application's source code into one or more optimized static files for deployment in production. The Vite build process is code split, compressed, and optimized as needed to provide optimal performance and file size.

# 
{
  "scripts": {
    "build": "vite build"
  }
}

2. Environment variables

Vite supports the use of environment variables in projects. You can create a .env file in the root directory of your project and define the environment variables you need. Then, in your code, you can use objects to access these environment variables. Vite will automatically load the corresponding environment variable files according to the current environment, such as ., ., etc.

# .env
VITE_API_URL=
VITE_APP_NAME=My App
​​​​​​​# 
(.VITE_API_URL); // Output:(.VITE_APP_NAME); // Output：My App

3. Mode

Vite supports two modes: development mode and production mode. In development mode, Vite provides a development server that enables fast cold start and hot reloading to obtain instant feedback during development. In production mode, Vite optimizes and packages the application to provide higher performance and smaller file sizes.

# 
{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

4. Compatible with old browsers

Vite does not support older browsers by default because it uses some modern JavaScript features and browser native module features. However, you can enable support for older browsers through configuration files. By setting the target option to es2015 and using the @vitejs/plugin-legacy plugin, you can convert your application to code compatible with old browsers.

# 
import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
  plugins: [
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ]
});

5. TypeScript related

Vite provides native support for TypeScript. You can use TypeScript in your project to write code, and Vite automatically recognizes and compiles TypeScript files. While using TypeScript, you can enjoy the fast cold start and hot reload features that Vite brings.

# 
import { createApp } from 'vue';
import App from './';
const app = createApp(App);
('#app');

6. Basic configuration

The basic configuration of Vite can be set through a configuration file named . In this configuration file, you can customize various options, such as entry files, output paths, plug-in configurations, etc. You can also use different plugins to extend the functionality of Vite as needed.

# 
import { defineConfig } from 'vite';
export default defineConfig({
  root: './src',
  base: '/my-app/',
  plugins: [],
  build: {
    outDir: '../dist',
    assetsDir: 'assets',
    sourcemap: true
  }
});

7. The complete set of core configurations

// 
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';
import { resolve } from 'path';
export default defineConfig({
  root: resolve(__dirname, './src'),
  base: '/my-app/',
  build: {
    outDir: resolve(__dirname, './dist'),
    assetsDir: 'assets',
    sourcemap: true,
    rollupOptions: {
      external: ['axios'],
      output: {
        globals: {
          axios: 'axios'
        }
      }
    }
  },
  plugins: [
    vue(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ],
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: '',
        changeOrigin: true,
        rewrite: (path) => (/^\/api/, '')
      }
    }
  }
});
  • root: Specify the root directory path of the project.
  • base: Specifies the base path of the project, used to specify the reference path of the static resource.
  • build: used to configure build-related options, including output directory, static resource directory, whether to generate source maps, etc.
  • plugins: Used to configure Vite plugins such as @vitejs/plugin-vue and @vitejs/plugin-legacy.
  • server: Options used to configure development servers, including port numbers, proxy, etc.

In addition, the example code shows the use of some other configuration options:

  • rollupOptions: Options for configuring Rollup, such as external dependencies and global variables.
  • proxy: A proxy option used to configure the development server to proxy requests to other servers.

8. Overall code example

// 
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': (__dirname, 'src')
    }
  },
  server: {
    port: 3000
  }
});

This is a basic Vite configuration file that includes the following configuration options:

  • plugins: Use the @vitejs/plugin-vue plugin to support Vue single file components.
  • : Set an alias and point @ to the project's src directory to facilitate the introduction of modules using absolute paths in the code.
  • : Set the port number of the development server to 3000.

Next, we can create a simple Vue application in the src directory:

<!--  -->
<template>
  <div>
    <h1>Hello Vite!</h1>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Welcome to Vite!'
    };
  }
};
</script>
<style>
h1 {
  color: blue;
}
</style>
// 
import { createApp } from 'vue';
import App from './';
createApp(App).mount('#app');

Run npm install in the project root directory to install the dependencies, and then start the development server using npm run dev. Open http://localhost:3000 in your browser and you will see a simple Vue app that says "Hello Vite!" and "Welcome to Vite!".

The above is the detailed content of the complete version of the tutorial on Vite project construction and environment configuration. For more information about Vite tutorials, please pay attention to my other related articles!