工具链 之 Vite 常见的共享选项配置（二）

这些配置通常包括插件、别名、CSS 预处理器设置。

1. 插件（Plugins）

插件是 Vite 生态系统中的核心部分，用于扩展 Vite 的功能。一些插件（如 @vitejs/plugin-vue 对于 Vue 项目）是项目所必需的，并且在所有环境中都应该被包含。

// vite.config.js  
import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue' // Vue 项目必需的插件  
  
export default defineConfig({  
  plugins: [  
    vue(), // 在所有环境中都包含 Vue 插件  
    // ... 其他插件  
  ],  
  // ... 其他配置  
})

2. 别名（Resolve Aliases）

别名允许你为模块路径定义简短的别名，从而简化导入语句。这些别名通常在整个项目中都是相同的。

// vite.config.js  
import { defineConfig } from 'vite'  
import path from 'path'  
  
export default defineConfig({  
  resolve: {  
    alias: {  
      '/@/': path.resolve(__dirname, 'src'), // 将 '/@/' 别名映射到项目的 src 目录  
      // ... 其他别名  
    },  
  },  
  // ... 其他配置  
})

3. CSS 预处理器（CSS Preprocessors）

如果你使用 SCSS、Less 或其他 CSS 预处理器，你可能需要配置它们的行为。这些配置通常也是共享的。

// vite.config.js  
import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue'  
  
export default defineConfig({  
  plugins: [vue()],  
  css: {  
    preprocessorOptions: {  
      scss: {  
        // SCSS 预处理器的配置选项  
        additionalData: `@import "./src/styles/variables.scss";`, // 引入全局 SCSS 变量文件  
        // ... 其他 SCSS 配置  
      },  
    },  
  },  
  // ... 其他配置  
})

4. 构建输出（Build Output）

虽然构建输出的具体细节（如输出目录、压缩选项等）可能因环境而异，但一些基本的构建输出配置（如输出格式）通常是共享的。

// vite.config.js  
import { defineConfig } from 'vite'  
  
export default defineConfig({  
  build: {  
    outDir: 'dist', // 输出目录（可以根据环境调整）  
    assetsDir: 'assets', // 静态资源目录  
    lib: {  
      entry: 'src/main.js', // 如果构建库，指定入口文件  
      name: 'my-lib', // 库的名字  
      fileName: (format) => `my-lib.${format}.js`, // 输出的文件名格式  
    },  
    rollupOptions: {  
     	output: {  
          // 假设你想要在生产环境中添加一些特定的 Rollup 配置  
          if (isProduction) {  
            // 生产环境特定的 Rollup 配置  
          }  
        },  
    },  
    // ... 其他构建配置  
  },  
  // ... 其他配置  
})

5. 环境变量（Environment Variables）

虽然环境变量本身不是配置选项，但你可以在配置文件中使用它们来根据环境定制配置。通常，你会在 .env 文件中定义环境变量，并在 vite.config.js 中使用它们。列如：

// vite.config.js  
import { defineConfig } from 'vite'  
  
export default defineConfig(({ command, mode }) => {  
  const isProduction = mode === 'production'  
  const port = isProduction ? 8080 : 3000 // 根据环境设置端口  
  
  return {  
    server: {  
      port, // 使用环境变量或默认值设置端口  
    },  
    // ... 其他配置  
  }  
})

6. 定义全局常量

export default defineConfig({  
  define: {  
	  'process.env': {  
	     MODE: JSON.stringify(mode),  
	     // ... 其他环境相关的全局变量  
	   },  
  }, 
  // ... 其他配置  
})
 

7. 开发服务器选项

export default defineConfig({  
  server: {  
      port, // 使用环境变量 VITE_APP_PORT 定义的端口，如果未定义则使用默认值 3000  
      // ... 其他开发服务器配置  
  },  
  // ... 其他配置  
})