vite.config.js 的一些常用配置

简介: vite.config.js 的一些常用配置

当使用 Vite 进行项目配置时,可以按照不同的功能模块进行拆分和解释。以下是对每个模块的详细解释:

  1. 模块: base
    这个模块主要包含一些项目的基础配置。
    base: '/my-subpath/': 指定项目的基础路径,用于处理部署在子路径下的情况。例如,如果你的应用部署在 http://example.com/my-subpath/,那么这个配置项就应该是 '/my-subpath/'。
  2. 模块: plugins
    这个模块用于配置 Vite 的插件。
    plugins: [...]: 这里可以列出你使用的各种 Vite 插件,例如在开发中可能用到的一些插件,或者自定义插件。
  3. 模块: server
    这个模块用于配置开发服务器相关的选项。
    server.port: 8080: 指定开发服务器的端口号,默认是 3000。你可以根据需要修改为其他端口。
    server.proxy: {...}: 配置开发服务器的代理规则,用于解决跨域请求问题。例如,将所有以 /api 开头的请求代理到 http://localhost:4000。
  4. 模块: resolve
    这个模块用于配置模块解析相关的选项。
    resolve.alias: {...}: 配置模块导入时的别名,用于简化导入路径。这里的示例是给 @ 别名配置了 /src。
  5. 模块: build
    这个模块用于配置项目的构建选项。
    build.outDir: 'my-build-output': 指定构建输出目录,默认是 dist。这里设置为 my-build-output。
    build.assetsDir: 'my-assets': 指定静态资源输出目录,默认是与 outDir 同级的 assets。这里设置为 my-assets。
    build.sourcemap: false: 是否生成源映射文件,默认为 true。这里设置为 false 表示不生成源映射文件。
    build.minify: false: 是否启用代码压缩,默认为 terser。这里设置为 false 表示禁用压缩。
    build.rollupOptions: {...}: 配置 Rollup 打包工具的选项,可以进行更细粒度的配置。
    build.commonjsOptions: {...}: 配置 CommonJS 转换的选项,用于处理一些 CommonJS 模块。
    build.target: 'esnext': 指定输出代码的目标环境,可选值为 'modules'(默认)或 'esnext'。这里设置为 'esnext'

这样,你可以根据项目的实际需求分别调整这些模块下的配置选项。

export default {
  // 基础配置
  base: '/my-subpath/',

  // 插件配置
  plugins: [
    // 插件列表
  ],

  // 开发服务器配置
  server: {
    port: 8080,
    proxy: {
      '/api': 'http://localhost:4000'
    }
  },

  // 模块解析配置
  resolve: {
    alias: {
      '@': '/src'
    }
  },

  // 构建配置
  build: {
    outDir: 'my-build-output',
    assetsDir: 'my-assets',
    sourcemap: false,
    minify: false, // 可选:true(默认) | false
    rollupOptions: {
      // Rollup options
    },
    commonjsOptions: {
      // CommonJS options
    },
    target: 'esnext'
  }
}
目录
相关文章
|
1月前
|
Java 数据库连接 开发工具
web后端-SpringCloud-Config分布配置
web后端-SpringCloud-Config分布配置
|
1月前
|
中间件
egg.js 24.17中间件配置
egg.js 24.17中间件配置
20 0
egg.js 24.17中间件配置
|
2月前
|
API
在vite.config.js 配置代理
在vite.config.js 配置代理
71 2
|
11天前
|
JavaScript
vue.config.ts配置环境变量
vue.config.ts配置环境变量
17 0
|
1月前
|
移动开发 监控 小程序
mPaaS常见问题之uniapp ios端云打包的配置config文件如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
27 0
|
1月前
|
消息中间件 SpringCloudAlibaba Java
【Springcloud Alibaba微服务分布式架构 | Spring Cloud】之学习笔记(八)Config服务配置+bus消息总线+stream消息驱动+Sleuth链路追踪
【Springcloud Alibaba微服务分布式架构 | Spring Cloud】之学习笔记(八)Config服务配置+bus消息总线+stream消息驱动+Sleuth链路追踪
785 0
|
1月前
|
开发工具 git 微服务
【二十三】搭建SpringCloud项目六(Config)配置中心动态刷新
【二十三】搭建SpringCloud项目六(Config)配置中心动态刷新
19 0
|
1月前
|
Java 开发工具 git
【二十二】搭建SpringCloud项目六(Config)配置中心
【二十二】搭建SpringCloud项目六(Config)配置中心
32 0
|
2月前
|
缓存 小程序 Android开发
mPaaS问题之iOS调用插件的时候提示没有配置mpaas. Config文件如何解决
mPaaS配置是指在mPaaS平台上对移动应用进行的各项设置,以支持应用的定制化和优化运行;本合集将提供mPaaS配置的操作指南和最佳实践,助力开发者高效管理和调整移动应用的设置。
62 1
|
2月前
|
数据安全/隐私保护
Wiki.js 配置 LDAP 认证
Wiki.js 配置 LDAP 认证