vite.config.js文件配置指南

vite.config.js

export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())
  const { VITE_APP_ENV } = env
  return {
    base: VITE_APP_ENV === 'production' ? '/' : '/',
    plugins: createVitePlugins(env, command === 'build'),
    resolve: {
      alias: {
        '~': path.resolve(__dirname, './'),
        '@': path.resolve(__dirname, './src')
      },
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    server: {
      port: 80,
      host: true,
      open: true,
      proxy: {
        '/dev-api': {
          target: 'http://localhost:8080',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api/, '')
        }
      }
    }
  }
})

  const env = loadEnv(mode, process.cwd())
  const { VITE_APP_ENV } = env
  return {
    base: VITE_APP_ENV === 'production' ? '/' : '/',
    plugins: createVitePlugins(env, command === 'build'),
    resolve: {
      alias: {
        '~': path.resolve(__dirname, './'),
        '@': path.resolve(__dirname, './src')
      },
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    }

1. defineConfig：

   • 作用：用于定义 Vite 的配置，提供类型推断和自动补全功能。
   • 示例：

     export default defineConfig(({ mode, command }) => { ... });
     

2. loadEnv：

   • 作用：加载环境变量。
   • 示例：

     const env = loadEnv(mode, process.cwd());
     

   • 说明：根据当前的模式（mode）加载相应的环境变量文件（如 .env.development、.env.production 等）。

3. base：

   • 作用：配置应用的基础路径。
   • 示例：

     base: VITE_APP_ENV === 'production' ? '/' : '/',
     

   • 说明：根据环境变量 VITE_APP_ENV 设置基础路径。通常在生产环境中设置为 /，在开发环境中也设置为 /。

4. plugins：

   • 作用：配置 Vite 插件。
   • 示例：

     plugins: createVitePlugins(env, command === 'build'),
     

   • 说明：调用 createVitePlugins 函数，传入环境变量和命令类型（是否为构建命令），返回插件配置。

5. resolve：

   • 作用：配置模块解析选项。
   • 示例：

     resolve: {
       alias: {
         '~': path.resolve(__dirname, './'),
         '@': path.resolve(__dirname, './src')
       },
       extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
     }
     

   • 说明：
     • alias：设置路径别名，方便在项目中引用模块。
       • ~：指向项目根目录。
       • @：指向 src 目录。
     • extensions：配置模块解析时的文件扩展名顺序。

server: {
  port: 80,
  host: true,
  open: true,
  proxy: {
    '/dev-api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      rewrite: (p) => p.replace(/^\/dev-api/, '')
    }
  }
}

字段配置

1. port：

   • 作用：指定开发服务器的端口号。
   • 示例：port: 80
   • 说明：开发服务器将会在端口 80 上运行。你可以根据需要更改这个端口号。

2. host：

   • 作用：指定开发服务器的主机名。
   • 示例：host: true
   • 说明：设置为 true 时，开发服务器将监听所有可用的网络地址（包括局域网和本地网络）。你也可以指定特定的主机名，例如 host: 'localhost'。

3. open：

   • 作用：自动打开浏览器。
   • 示例：open: true
   • 说明：设置为 true 时，开发服务器启动后会自动在默认浏览器中打开项目。

4. proxy：

   • 作用：配置代理。
   • 示例：

     proxy: {
       '/dev-api': {
         target: 'http://localhost:8080',
         changeOrigin: true,
         rewrite: (p) => p.replace(/^\/dev-api/, '')
       }
     }
     

   • 说明：配置开发服务器的代理规则，用于解决跨域问题。具体配置项包括：
     • '/dev-api'：需要代理的路径前缀。所有以 /dev-api 开头的请求都会被代理到目标服务器。
     • target：目标服务器的地址。
       • 示例：target: 'http://localhost:8080'
       • 说明：将 /dev-api 开头的请求代理到 http://localhost:8080。
     • changeOrigin：
       • 作用：是否更改请求的源。
       • 示例：changeOrigin: true
       • 说明：设置为 true 时，代理服务器会更改请求的源，使其看起来像是直接从目标服务器发出的请求。
     • rewrite：
       • 作用：重写请求路径。
       • 示例：

         rewrite: (p) => p.replace(/^\/dev-api/, '')
         

       • 说明：使用正则表达式将请求路径中的 /dev-api 前缀替换为空字符串。例如，/dev-api/users 将被重写为 /users，然后代理到目标服务器。