文章目录
配置root：base：publicDir：plugins：optimizeDeps：server：build：resolve：
配置
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 选项，你可以为模块的路径设置别名，方便引用。
推荐阅读
您阅读本篇文章共花了：
发表评论