vite简单配置教程-摩杜云开发者社区

简单的 Vite 配置教程

步骤 1: 安装 Vite

确保你已经安装了 Node.js（版本 >= 12.0.0）和 npm，然后使用以下命令安装 Vite：

npm init vite@latest my-vite-project
cd my-vite-project
npm install

步骤 2: 了解基本配置

Vite 的配置文件为 vite.config.js，你可以在项目根目录创建这个文件。以下是一个简单的配置文件：

// vite.config.js
export default {
  // 入口文件
  // 默认为 'src/main.js'
  // 修改为 'src/index.js'
  entry: 'src/index.js',

  // 项目输出目录，默认为 'dist'
  outDir: 'dist',

  // 公共基础路径
  // 在项目部署到子路径时使用
  // 例如，'/my-app/' 将被部署到 http://your-domain.com/my-app/
  base: '/',

  // 服务器配置
  server: {
    port: 3000, // 服务器端口号
    open: true, // 是否在服务器启动时打开浏览器
  },
};

步骤 3: 配置插件

Vite 支持插件来扩展其功能。在配置文件中，你可以通过 plugins 选项配置插件。例如，如果你想使用 Vite 插件 Vue，你可以这样配置：

// vite.config.js
import Vue from '@vitejs/plugin-vue';

export default {
  plugins: [Vue()],
};

步骤 4: 更多配置

Vite 支持许多其他配置选项，允许你更深入地定制项目。以下是一些常见的选项：

resolve：配置模块解析。
css：配置 CSS 相关选项。
build：配置生产构建选项。

// vite.config.js
export default {
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/styles/variables.scss";',
      },
    },
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    manifest: true,
  },
};

步骤 5: 运行和构建

在你的项目根目录下，你可以使用以下命令启动开发服务器：

npm run dev

构建生产版本：

npm run build

1. 使用 Plugins

Vite 提供了许多有用的插件，可以帮助你处理不同类型的资源。例如，@vitejs/plugin-vue 用于支持 Vue 单文件组件。

// vite.config.js
import Vue from '@vitejs/plugin-vue';

export default {
  plugins: [Vue()],
};

2. 配置预处理器

如果你使用了 CSS 预处理器，可以配置 Vite 支持。例如，使用 Sass：

// vite.config.js
export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/styles/variables.scss";',
      },
    },
  },
};

3. 别名和路径解析

使用别名简化导入路径，提高代码可读性：

// vite.config.js
export default {
  resolve: {
    alias: {
      '@': '/src',
      'components': '/src/components',
      // 添加其他别名...
    },
  },
};

4. 服务器代理

在开发过程中，你可能需要配置代理，解决跨域问题：

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
};

5. 自定义 Rollup 配置

如果你需要更细粒度地控制 Rollup 的配置，可以通过 rollupInputOptions 和 rollupOutputOptions 来进行配置：

// vite.config.js
export default {
  rollupInputOptions: {
    external: ['external-lib'],
  },
  rollupOutputOptions: {
    globals: {
      'external-lib': 'externalLib',
    },
  },
};

6. 代码拆分

使用动态导入和异步组件，以便将代码拆分成小块，提高应用的性能：

// src/main.js
const component = import('./components/MyComponent.vue');

// vite.config.js
export default {
  build: {
    chunkSizeWarningLimit: 1000,
  },
};