简单的 Vite 配置教程
步骤 1: 安装 Vite
确保你已经安装了 Node.js（版本 >= 12.0.0）和 npm，然后使用以下命令安装 Vite：
npm init vite@latest my-vite-project
cd my-vite-project
npm install步骤 2: 了解基本配置
Vite 的配置文件为 vite.config.js，你可以在项目根目录创建这个文件。以下是一个简单的配置文件：
// vite.config.js
export default {
// 入口文件
// 默认为 'src/main.js'
// 修改为 'src/index.js'
entry: 'src/index.js',
// 项目输出目录，默认为 'dist'
outDir: 'dist',
// 公共基础路径
// 在项目部署到子路径时使用
// 例如，'/my-app/' 将被部署到 http:///my-app/
base: '/',
// 服务器配置
server: {
port: 3000, // 服务器端口号
open: true, // 是否在服务器启动时打开浏览器
},
};步骤 3: 配置插件
Vite 支持插件来扩展其功能。在配置文件中，你可以通过 plugins 选项配置插件。例如，如果你想使用 Vite 插件 Vue，你可以这样配置：
// vite.config.js
import Vue from '@vitejs/plugin-vue';
export default {
plugins: [Vue()],
};步骤 4: 更多配置
Vite 支持许多其他配置选项，允许你更深入地定制项目。以下是一些常见的选项：
resolve：配置模块解析。css：配置 CSS 相关选项。build：配置生产构建选项。
// vite.config.js
export default {
resolve: {
alias: {
'@': '/src',
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/styles/variables.scss";',
},
},
},
build: {
outDir: 'dist',
assetsDir: 'assets',
manifest: true,
},
};步骤 5: 运行和构建
在你的项目根目录下，你可以使用以下命令启动开发服务器：
npm run dev构建生产版本：
npm run build1. 使用 Plugins
Vite 提供了许多有用的插件，可以帮助你处理不同类型的资源。例如，@vitejs/plugin-vue 用于支持 Vue 单文件组件。
// vite.config.js
import Vue from '@vitejs/plugin-vue';
export default {
plugins: [Vue()],
};2. 配置预处理器
如果你使用了 CSS 预处理器，可以配置 Vite 支持。例如，使用 Sass：
// vite.config.js
export default {
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/styles/variables.scss";',
},
},
},
};3. 别名和路径解析
使用别名简化导入路径，提高代码可读性：
// vite.config.js
export default {
resolve: {
alias: {
'@': '/src',
'components': '/src/components',
// 添加其他别名...
},
},
};4. 服务器代理
在开发过程中，你可能需要配置代理，解决跨域问题：
// vite.config.js
export default {
server: {
proxy: {
'/api': {
target: 'http://',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
};5. 自定义 Rollup 配置
如果你需要更细粒度地控制 Rollup 的配置，可以通过 rollupInputOptions 和 rollupOutputOptions 来进行配置：
// vite.config.js
export default {
rollupInputOptions: {
external: ['external-lib'],
},
rollupOutputOptions: {
globals: {
'external-lib': 'externalLib',
},
},
};6. 代码拆分
使用动态导入和异步组件，以便将代码拆分成小块，提高应用的性能：
// src/main.js
const component = import('./components/MyComponent.vue');
// vite.config.js
export default {
build: {
chunkSizeWarningLimit: 1000,
},
};
