vue3中vite.config.js文件常用配置

配置

vite.config.js文件是 Vite 项目的配置文件，通过该文件你可以对 Vite 进行一些配置，包括插件配置、构建配置、开发服务器配置等。以下是一些常用的。以下是一些常用的 vite.config.js 配置选项：

root：

该选项指定项目的根目录。默认情况下，Vite 会以执行 vite 命令的目录作为根目录。你可以使用 root 选项指定不同的根目录。

// vite.config.js
export default {
  root: './src',
  // other configurations...
};

这样配置的话，Vite 将在 ./src 目录中寻找源代码和配置文件。

base：

该选项指定应用的基础路径，通常用于将应用部署到非根目录的情况。

// vite.config.js
export default {
  base: '/my-app/',
  // other configurations...
};

当你将应用部署到服务器的子路径时，使用 base 可以确保资源的正确加载。

publicDir：

该选项指定静态资源文件夹，默认为 public。在 public 文件夹中的内容会被复制到输出目录。

// vite.config.js
export default {
  publicDir: 'static',
  // other configurations...
};

如果你希望静态资源放在不同的文件夹中，可以使用 publicDir 进行配置。

plugins：

该选项用于配置 Vite 插件，可以是一个数组。

// vite.config.js
import Vue from '@vitejs/plugin-vue';

export default {
  plugins: [Vue()],
  // other configurations...
};

插件用于扩展 Vite 的功能，例如添加对某种特定文件类型的支持或者在构建过程中进行优化。

optimizeDeps：

配置第三方模块的优化策略。

// vite.config.js
export default {
  optimizeDeps: {
    include: ['lodash'],
  },
  // other configurations...
};

通过配置 optimizeDeps 可以告诉 Vite 哪些模块需要进行预优化，提高构建和加载性能。

server：

该选项用于配置开发服务器，包括端口、代理等。

// vite.config.js
export default {
  server: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
  // other configurations...
};

这里的例子配置了一个简单的代理，将 /api 请求代理到 http://localhost:3000。

build：

该选项用于配置生产构建相关的选项，如输出目录、代码压缩等。

// vite.config.js
export default {
  build: {
    outDir: 'dist',
    minify: 'terser',
  },
  // other configurations...
};

通过 build 选项，可以指定构建产物的输出目录、是否进行代码压缩等。

resolve：

该选项用于配置模块解析规则，如设置别名等。

// vite.config.js
export default {
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  // other configurations...
};

通过 resolve 选项，你可以为模块的路径设置别名，方便引用。