日期:2024年8月9日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释:如果您觉得有所帮助
,帮忙点个赞
,也可以关注我
,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^
1.01365 = 37.7834;0.99365 = 0.0255
1.02365 = 1377.4083;0.98365 = 0.0006
说在最前面:本文
vue3
的示例代码,在没有另外声名的情况下,均采用<script setup>
组合式代码风格,风格统一,避免混乱,请各位新老食客放心食用哈 ^ _ ^
文章目录
一、前言
在现代前端开发领域,开发者们一直在追求更快的构建速度和更流畅的开发体验。Vite
,作为一款新型的前端构建工具,正在逐渐成为开发者的新宠。本文将带你深入了解 Vite
的核心概念,并在 Vue3
项目中应用 Vite
,最后我们将详细探讨如何配置vite.config.ts。
二、 Vite 简介
Vite
(法语意为“快”)是一个由原生 ES
模块提供支持的现代前端开发与构建工具。它利用浏览器的原生模块加载特性,提供了极速的开发体验。以下是 Vite
的几个核心概念:
-
原生
ES
模块
Vite
允许开发者使用ES模块的import
语法进行开发,这意味着浏览器可以直接解析模块,无需打包过程。 -
No Bundle 开发服务器
在开发模式下,Vite
无需打包,可以直接启动开发服务器,极大地提高了启动速度。 -
按需编译
Vite
采用按需编译的策略,只有当请求某个模块时,才会进行编译,减少了不必要的编译工作。 -
热模块替换(HMR)
Vite
提供了快速且精准的HMR
,当文件更新时,只会重新编译更新的模块,从而实现快速反馈。 -
插件系统
Vite
的插件系统基于Rollup
,易于扩展和定制。
三、 在 Vue3 中使用 Vite
下面,我们将通过一系列步骤,在 Vue3
项目中应用 Vite
。
1、安装 Node.js
首先,确保你的系统安装了 Node.js
。Vite
需要 Node.js
环境来运行。
2、创建 Vue3 + Vite 项目
使用以下命令创建一个新的 Vue3
+ Vite
项目:
npm create vite@latest my-vue-app -- --template vue
该命令会创建一个名为my-vue-app
的新目录,并使用Vue模板初始化项目。
3、进入项目目录
cd my-vue-app
4、安装依赖
npm install
5、运行开发服务器
npm run dev
启动 Vite
开发服务器后,通常在几秒钟内即可完成。
6、项目结构
初始化后,项目的基本结构如下:
my-vue-app/
├── public/
│ └── images
├── src/
│ ├── assets/
│ ├── components/
│ │ └── HelloWorld.vue
│ ├── App.vue
│ └── main.ts(也可以是main.js)
├── .gitignore
├── index.html
├── package.json
└── vite.config.ts (也可以是vite.config.js)
四、 配置 vite.config.ts
vite.config.ts
是Vite项目的核心配置文件。在这个文件中,你可以配置 Vite
的构建过程、开发服务器选项、环境变量、插件等。
1、基础配置
import { defineConfig } from 'vite';
export default defineConfig({
// 基本路径
base: '/',
// 服务器选项
server: {
host: '0.0.0.0', // 指定服务器主机名
port: 3000, // 指定服务器端口
open: true, // 在服务器启动时自动打开浏览器
cors: true, // 为开发服务器配置 CORS
},
// 构建选项
build: {
outDir: 'dist', // 指定输出路径
assetsDir: 'assets', // 指定生成静态资源的存放路径
sourcemap: true, // 构建后是否生成 source map 文件
minify: 'terser', // 指定压缩方式,'terser' 或 'esbuild'
},
// 插件配置
plugins: [
// 插件实例化
],
// 路径解析配置
resolve: {
alias: {
'@': resolve(__dirname, '/src'),
},
},
// 环境变量文件目录,默认为 ./env ,可以不需要配置的
envDir: './env',
});
2、常用参数说明
- base: 基本路径,用于项目部署到非根路径时。
- server: 服务器配置,包括端口、主机、代理等。
- build: 构建配置,包括输出目录、资源目录、source map、压缩等。
- resolve: 路径解析配置,可以配置别名等,便于在项目中引用模块。
- css: CSS 相关配置,如预处理器、模块化等。
- plugins: 插件数组,用于扩展 Vite 功能,例如添加 Vue 插件以支持 .vue 文件。
- envDir: 环境变量文件目录,用于指定环境变量文件的存放位置。
3、配置 vite.config.js
示例
以下是一个更详细的 vite.config.js
配置示例,包括了路径别名、环境变量、插件等配置:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({
// 基本路径配置
base: '/my-app/', // 假设项目部署在 /my-app/ 路径下
// 服务器选项配置
server: {
host: '0.0.0.0', // 指定服务器主机名
port: 8080, // 修改默认端口
open: true, // 在服务器启动时自动打开浏览器
cors: true, // 为开发服务器配置 CORS
},
// 路径解析配置
resolve: {
alias: {
// 设置路径别名
'@': resolve(__dirname, 'src'),
// 可以添加更多别名
},
},
// 构建选项配置
build: {
outDir: 'dist', // 指定输出目录
assetsDir: 'assets', // 指定生成静态资源的存放路径
sourcemap: true, // 构建后是否生成 source map 文件
minify: 'terser', // 指定压缩方式,'terser' 或 'esbuild'
// 其他构建配置
},
// 插件配置
plugins: [
vue(), // 使用 Vue 插件
// 可以添加更多插件
],
// CSS 配置
css: {
preprocessorOptions: {
// 配置预处理器选项
scss: {
additionalData: `$injectedColor: orange;`,
},
},
},
// 环境变量配置
envDir: './env',
});
在这个配置文件中,我们设置了项目的基本路径、服务器选项、路径别名、构建配置、插件配置以及 CSS
预处理器选项。我们还指定了环境变量文件的目录,这样可以在不同的环境中使用不同的配置。
五、结语
Vite
为 Vue3
提供了一个快速、高效的开发体验。通过上述步骤和配置,你可以轻松地在 Vue3
项目中集成 Vite
,并根据自己的需求定制项目配置。Vite
的插件系统和灵活的配置选项使得它能够适应各种不同的开发场景,从而帮助开发者提升工作效率。
随着前端技术的不断发展,Vite
已经成为许多开发者日常开发工作的一部分。掌握 Vite
的配置和使用,将有助于你更好地利用现代前端工具,提升项目的开发效率和质量。
参考文章:
版权声明:本文为博主原创文章,如需转载,请给出:
原文链接:https://blog.csdn.net/qq_35844043/article/details/141128882