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

2024-01-07 23:08:44

配置

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 选项,你可以为模块的路径设置别名,方便引用。

文章来源:https://blog.csdn.net/xu1912715645/article/details/135444266
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。