程序员scholar
  • Vue全家桶
  • Vue3
scholar
2024-09-01
目录

vue.config.js

# 1. 基础配置

# 1.1 base (项目基础路径配置)

  • 作用：设置项目的基础路径，默认是 '/'。如果项目将部署在子路径下，需要设置为子路径名称。

    import { defineConfig } from 'vite';

export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? '/sub-path/' : '/'
});
    1
    2
    3
    4
    5

# 1.2 build.outDir (打包输出目录)

  • 作用：指定打包生成的静态文件目录，默认是 dist。

    import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: 'dist'
  }
});
    1
    2
    3
    4
    5
    6
    7

# 1.3 build.assetsDir (静态资源目录配置)

  • 作用：配置生成的静态资源（如 js, css, img, fonts）目录，相对于 outDir。

    import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    assetsDir: 'static'
  }
});
    1
    2
    3
    4
    5
    6
    7

# 1.4 build.sourcemap (Source Map 配置)

  • 作用：是否生成 Source Map 文件，默认为 false。在生产环境下关闭可以减少包体积。

    import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    sourcemap: process.env.NODE_ENV !== 'production'
  }
});
    1
    2
    3
    4
    5
    6
    7

# 2. 开发服务器配置

# 2.1 server.port (开发服务器端口号)

  • 作用：配置开发服务器的端口号，默认为 3000。

    import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 8080
  }
});
    1
    2
    3
    4
    5
    6
    7

# 2.2 server.open (自动打开浏览器)

  • 作用：开发服务器启动后是否自动打开浏览器。

    import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    open: true
  }
});
    1
    2
    3
    4
    5
    6
    7

# 2.3 server.proxy (代理配置)

  • 作用：配置开发服务器的代理，用于解决跨域问题或将请求转发到后端服务器。

    import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

  • target：目标服务器地址。

  • changeOrigin：修改请求头中的 Origin 字段为目标地址。

  • rewrite：重写请求路径，这里将路径中的 /api 替换为空字符串。

# 3. 环境变量配置

# 3.1 使用 .env 文件配置环境变量

  • Vite 支持通过 .env 文件来配置环境变量。环境变量的名称必须以 VITE_ 为前缀。

    # .env.development
VITE_API_BASE_URL=http://localhost:3000
VITE_ENV_NAME=development
    1
    2
    3
    # .env.production
VITE_API_BASE_URL=https://api.production.com
VITE_ENV_NAME=production
    1
    2
    3

# 3.2 在代码中使用环境变量

  • 你可以通过 import.meta.env 来访问这些环境变量。

    export default {
  data() {
    return {
      apiUrl: import.meta.env.VITE_API_BASE_URL,
      envName: import.meta.env.VITE_ENV_NAME
    };
  },
  created() {
    console.log(`当前环境：${this.envName}`);
    console.log(`API 地址：${this.apiUrl}`);
  }
};
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

# 4. 插件配置

# 4.1 使用 Vite 插件

  • Vite 提供了丰富的插件机制，你可以通过 plugins 配置项添加插件。

    import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()]
});
    1
    2
    3
    4
    5
    6

# 4.2 使用 vite-plugin-env-compatible 兼容传统环境变量

  • 如果你需要兼容没有 VITE_ 前缀的环境变量，可以使用 vite-plugin-env-compatible 插件。

    import { defineConfig } from 'vite';
import envCompatible from 'vite-plugin-env-compatible';

export default defineConfig({
  plugins: [envCompatible()]
});
    1
    2
    3
    4
    5
    6

# 5. CSS 相关配置

# 5.1 css.preprocessorOptions (CSS 预处理器配置)

  • 作用：向 CSS 预处理器传递选项，如配置全局 scss 变量。

    import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
});
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

# 6. 构建优化

# 6.1 build.minify (代码压缩)

  • 作用：配置是否启用代码压缩。可以设置为 'terser' 使用 Terser 进行压缩，或设置为 false 禁用压缩。

    import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    minify: 'terser'
  }
});
    1
    2
    3
    4
    5
    6
    7

# 6.2 build.cssCodeSplit (CSS 代码分割)

  • 作用：配置是否启用 CSS 代码分割。

    import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    cssCodeSplit: true
  }
});
    1
    2
    3
    4
    5
    6
    7

# 6.3 build.rollupOptions (Rollup 配置)

  • 作用：Vite 内部使用 Rollup 进行构建，你可以通过 rollupOptions 来进一步自定义配置。

    import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  }
});
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

# 7. 多页应用配置

# 7.1 build.rollupOptions.input

  • 作用：Vite 默认支持单页面应用，但可以通过配置 rollupOptions.input 来实现多页应用支持。

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

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        subpage: resolve(__dirname, 'subpage/index.html')
      }
    }
  }
});
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

# 8. 启用或禁用特定功能

# 8.1 esbuild (配置 ESBuild)

  • 作用：Vite 使用 ESBuild 进行快速编译，你可以通过 esbuild 配置项自定义一些选项。

    import { defineConfig } from 'vite';

export default defineConfig({
  esbuild: {
    jsxInject: `import React from 'react'`,
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  }
});
    1
    2
    3
    4
    5
    6
    7
    8
    9

# 9. 其他配置

# 9.1 resolve.alias (路径别名配置)

  • 作用：配置路径别名，方便在项目中引用模块。

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

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      'components': resolve(__dirname, 'src/components')
    }
  }
});
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

# 9.2 define (全局常量替换)

  • 作用：在打包过程中定义全局常量，用于替换代码中的特定变量。

    import { defineConfig } from 'vite';

export default defineConfig({
  define: {
    __APP_VERSION__: JSON.stringify('v1.0.0')
  }
});
    1
    2
    3
    4
    5
    6
    7
编辑此页 (opens new window)
上次更新: 2025/01/30, 23:55:43
defineExpose() 和 ref 属性
生命周期

← 生命周期→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar