编程指南-Vue.js 3前端开发-6-使用Vite发布管理系统-2：项目构建配置
6.2 项目构建配置
项目构建是软件开发过程中的一个重要环节，项目构建是基于代码转换、资源优化、依赖管理、环境变量配置、自动化任务、模块化等，具体解释如下。
① 代码转换：现代Web开发经常涉及到使用ES6+、TypeScript、CSS预处理器（如Sass、Less）、JSX等高级语言或语法。这些高级特性虽然提高开发效率和代码的可维护性，但浏览器并不直接支持。项目构建过程需要将这些高级代码转换为浏览器能够理解的格式（如JavaScript、CSS）。
② 资源优化：在开发过程中，为调试和模块化开发，通常会使用多个JS、CSS文件、图片、字体等资源文件。但在生产环境下，过多的网络请求会导致页面加载速度变慢。项目构建过程可以对这些资源进行优化（合并文件、压缩代码、图片优化等），减少请求次数和文件大小，提高页面加载速度。
③ 依赖管理：引入的第三方库和框架依赖项的管理变得复杂且容易出错。Vite提供依赖管理功能，可以自动解析和加载项目中的依赖项，确保正确性和一致性。
④ 环境变量：不同的环境（如开发环境、测试环境、生产环境）需要不同的配置。Vite构建项目根据当前环境设置不同的环境变量，实现灵活的配置管理。
⑤ 自动化任务：Vite构建项目会执行自动化任务，如代码格式化、代码检查、单元测试等。提高开发效率，减少人为错误。
⑥ 模块化：现代Web开发强调模块化，即将代码分割成可复用的模块。Vite支持模块化开发，可以自动处理模块之间的依赖关系，确保代码的正确组织和加载。
6.2.1Vite配置
在 Vite 项目中，构建配置涉及多个方面，vite.config.js时Vite的配置文件，其常见的配置项如下。
（1）vite.config.js文件配置
① base：指定项目的公共基础路径。例如，如果设置为“/my-app/”，则所有资源的URL都会基于此路径。
② server：
port：定义开发服务器监听的端口号。
host：指定服务器运行的主机，例如“localhost”或特定的IP地址。
https：启用或禁用HTTPS协议。
proxy：配置代理规则，用于解决跨域请求问题。
③ build：
outDir：明确构建输出的目录，默认是“dist”。
assetsDir：指定静态资源（如图片、字体）在输出目录中的子文件夹名称。
minify：选择代码压缩的方式，“terser”提供更精细的控制，“esbuild”速度更快。
rollupOptions：深入定制Rollup的构建选项，例如控制代码拆分、模块格式等。
④ plugins：
例如，“vite-plugin-vue”用于支持Vue框架，“vite-plugin-svg-icons”用于优化SVG图标的处理
（2）处理 CSS
使用 sass ：安装sass相关依赖后，通过“vite.config.js”中的css对象进行配置，指定预处理器选项。
引入全局 CSS ：可以在配置中指定全局样式文件的路径，确保在项目的每个组件中都能应用。
（3）处理静态资源
图片：可以设置不同大小图片的加载策略，如懒加载。
字体：配置字体文件的处理方式，包括字体格式的转换和优化。
（4）环境变量
通过在项目根目录创建“.env”文件来设置不同环境的变量。例如， “.env.development”用于开发环境，“.env.production”用于生产环境。
在代码中使用“import.meta.env.VARIABLE_NAME”来获取环境变量的值。
（5）自定义别名
例如，将“@/”定义为“src/”的别名，方便在代码中更简洁地引用项目中的模块和文件。
通过对这些构建配置的精细调整和优化，使Vite更好地适应项目的特定需求，提高开发效率和构建产物的质量。
以下为Vite配置的具体使用示例：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
root: './',
base: '/my-app/',
publicDir: 'public',
resolve: {
alias: {
'@': '/path/to/src',
},
extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
},
server: {
host: 'localhost',
port: 3000,
https: false,
proxy: {
'/api': {
target: 'https://example.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
build: {
outDir: 'dist',
minify: 'terser',
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
},
});6.2.2使用Vite构建项目（Vue.js）
在使用Vite 构建项目时，首先需要满足开发环境的需求，Node.js版本为14.18+或更高版本，确定使用的框架和语言。本指南以Vue.js和JavaScript为例进行讲解。
使用Vite构建Vue.js项目，具体步骤如下。
（1）在使用Vite构建项目时可以直接通过命令行工具使用“npm create vite@latest”命令进行构建,第一次构建项目时询问是否安装“create-vite@5.5.1”，输入“y”按下回车，如图6-2-2-1所示。
（2）项目命名，项目默认名称为“vite-project”，如图6-2-2-2所示
（3）选择项目框架，此处选择“Vue”，如图6-2-2-3所示。
（4）选择使用的开发语言，此处选择“JavaScript”，如图6-2-2-4所示，
（5）执行“cd vite-project”,命令进入项目文件夹，执行“npm install”安装需要的模块，执行“npm run dev”运行项目。
cd vite-project
npm install
npm run dev（6）使用vite构建项目的初始化页面，如图6-2-2-5所示。
创作说明
名称：编程指南-Vue.js 3前端开发从学到用完美实践
版本：2024年
网站：http://www.51xueweb.cn
撰写团队：杜宇飞 侯志强 尤飞祥 段玉昆
指导审核：阮晓龙