1. process.cwd()

process.cwd() 返回 Node.js 进程的当前工作目录的绝对路径。

// 获取当前工作目录

const root = process.cwd()

// 例如：在 /Users/project/my-app 目录下运行命令

console.log(process.cwd())  // 输出: /Users/project/my-app

与 dirname 的区别- process.cwd(): 返回运行 node 命令时所在的目录- __dirname: 返回源代码中当前文件所在的目录

2. path.resolve()path.resolve() 方法将路径或路径片段解析为绝对路径。

基本用法

import { resolve } from 'path'

// 基础示例
resolve('src')  // /Users/project/my-app/src

// 多段路径
resolve('src', 'components', 'Button.vue')  
// /Users/project/my-app/src/components/Button.vue

路径解析规则

// 1. 从右向左处理，遇到绝对路径会重置
resolve('/foo', '/bar', 'baz')     // '/bar/baz'

// 2. 相对路径会追加
resolve('foo', 'bar', 'baz')       // '/当前目录/foo/bar/baz'

// 3. 处理 . 和 ..
resolve('foo', '../bar', './baz')  // '/当前目录/bar/baz'

3. Vite 配置详解### 基础配置

import { defineConfig } from 'vite'
import { resolve } from 'path'

const root = process.cwd()

export default defineConfig({
  // 基础公共路径
  base: '/',
  
  // 项目根目录
  root: root,
  
  // 开发服务器选项
  server: {
    host: true,
    port: 3000,
    open: true,
    cors: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

构建选项

export default defineConfig({
  build: {
    // 输出目录
    outDir: 'dist',
    
    // 生成源码映射
    sourcemap: true,
    
    // 压缩选项
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    },
    
    // 分块策略
    rollupOptions: {
      output: {
        manualChunks: {
          'vendor': ['vue', 'vue-router', 'pinia'],
          'echarts': ['echarts']
        }
      }
    }
  }
})

解析选项

export default defineConfig({
  resolve: {
    // 别名配置
    alias: [
      {
        find: '@',
        replacement: resolve(root, 'src')
      },
      {
        find: '@components',
        replacement: resolve(root, 'src/components')
      }
    ],
    
    // 导入时想要省略的扩展名列表
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
  }
})

CSS 配置

export default defineConfig({
  css: {
    // CSS 预处理器配置
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/styles/variables.scss";',
        javascriptEnabled: true
      }
    },
    
    // CSS modules 配置
    modules: {
      scopeBehaviour: 'local',
      generateScopedName: '[name]_[local]_[hash:base64:5]'
    }
  }
})

优化选项

export default defineConfig({
  optimizeDeps: {
    // 预构建依赖项
    include: [
      'vue',
      'vue-router',
      'pinia',
      'axios',
      'lodash-es'
    ],
    // 排除预构建的依赖项
    exclude: ['your-package-name']
  }
})

环境变量配置

// .env.development
VITE_API_URL=http://dev-api.example.com
VITE_APP_TITLE=开发环境

// vite.config.ts
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd())
  
  return {
    define: {
      'process.env': env
    }
  }
})

4. 最佳实践

路径处理

function pathResolve(dir: string) {
  return resolve(process.cwd(), '.', dir)
}

// 使用
const config = {
  alias: {
    '@': pathResolve('src'),
    '@components': pathResolve('src/components')
  }
}

环境区分

export default defineConfig(({ command, mode }) => {
  const isBuild = command === 'build'
  const env = loadEnv(mode, process.cwd())
  
  return {
    base: env.VITE_BASE_PATH,
    server: {
      port: env.VITE_PORT
    },
    build: {
      minify: isBuild ? 'terser' : false
    }
  }
})

这些配置可以根据项目需求进行调整和组合，创建最适合你项目的构建配置。