Vite.config.js 轻松配置 Vue3 项目参数，让构建和部署更便捷！

2023-11-30 14:46:26

利用 Vite.config.js 优化你的 Vue 3 构建体验

Vite 作为 Vue 3 项目中备受推崇的构建工具，让你能够轻松高效地构建和部署你的项目。通过在项目根目录中创建名为 vite.config.js 的文件，你可以进一步定制和优化构建过程。本文将深入探讨如何利用此配置文件来配置代理服务器、端口、打包名和图片压缩等关键参数，帮助你提升开发体验。

1. 配置代理服务器：畅通与外部资源的连接

代理服务器让你能够在开发过程中访问其他服务器上的资源，例如后端 API。在 vite.config.js 文件中，你可以使用 server.proxy 配置代理服务器：

module.exports = {
  server: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
}

此示例配置将所有以 /api 开头的请求代理到 http://localhost:3000 服务器。

2. 配置端口：设定你的开发服务器端口

端口指定了 Vite 运行的端口号。在 vite.config.js 文件中，你可以使用 server.port 配置端口：

module.exports = {
  server: {
    port: 3000
  }
}

在此示例中，我们将 Vite 的端口设置为 3000。

3. 配置打包名：定义你的项目输出文件

打包名是构建项目后的最终输出文件名称。在 vite.config.js 文件中，你可以使用 build.fileName 配置打包名：

module.exports = {
  build: {
    fileName: 'main.js'
  }
}

此示例将项目的打包名配置为 main.js。

4. 配置图片压缩：减小项目体积

图片压缩有助于减小项目体积。在 vite.config.js 文件中，你可以使用 build.rollupOptions.plugins 配置图片压缩插件：

module.exports = {
  build: {
    rollupOptions: {
      plugins: [
        require('imagemin-vite')({
          gifsicle: {
            optimizationLevel: 7
          },
          optipng: {
            optimizationLevel: 7
          },
          svgo: {
            plugins: [
              {
                name: 'removeViewBox'
              }
            ]
          }
        })
      ]
    }
  }
}