Vite前端构建工具
是什么
Vite是Vue的作者尤雨溪
开发的 一种新型前端构建工具。
Vite在大型项目开发模式下,打包速度远高于webpack。
Vite 为什么这么快
1. 快速冷启动
Vite只启动一台静态页面的服务器,不会打包全部项目文件代码,服务器根据客户端的请求加载不同的模块处理,实现按需加载
。
而我们所熟知的webpack则是,一开始就将整个项目
都打包一遍,再开启dev-server,如果项目规模庞大,时间必然很长。
2. 热模块更新
对于热更新问题,Vite采用立即编译当前修改文件
的办法,同时结合vite的缓存机制(http缓存 ==》 Vite内置缓存),加载更新后的文件内容
3. 打包编译速度
Vite使用esbuild
预构建依赖,而esbuild是用Go
编写的,比JS编写的打包器快很多。
常用配置
vite.config.js 文件
import { defineConfig } from 'vite' // 使用 defineConfig 工具函数获取类型提示:
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
/* ==============================================》 打包配置 《============================================== */
/*
* base: 当使用 yarn build 命令构建应用程序时,base 配置项会影响生成的静态文件的路径,确保在部署时能够正确访问到这些文件。
* 如果应用程序部署在域名的 根路径 下,则可以将 base 配置项 省略 或设 为 '/', 实际开发中这是大多数情况。
* 当应用程序部署到不同路径下时,base 配置项非常有用。例如,如果您的应用程序部署在域名的 子路径 下,
* 如 https://www.example.com/my-app/,则需要这么配置==> base: '/my-app/'
*/
base: '/foo/', // 开发或生产环境服务的公共基础路径
build: {
outDir: 'build', // 打包文件 的 输出目录
assetsDir: 'static', // 静态资源 的 存放目录
assetsInlineLimit: 4096 // 图片转 base64 编码的阈值
},
/* ==============================================》 开发配置 《============================================== */
resolve: {
alias: {
'@': path.resolve(__dirname, './src') // 路径别名
},
extensions: ['.js', '.ts', '.json'] // 导入时想要省略的扩展名列表,不建议包含 .vue 因为他会影响 IDE 和类型的支持。
},
server: {
/* 将 host 设置为 true 或 0.0.0.0 ,这样服务器就会监听所有地址,包括局域网和公网地址。当手机和电脑处于同一个网络环境下,就可以通过地址进行访问了。 */
host: true,
/* 反向代理也是经常会用到的一个功能,通常使用它来进行跨域: */
proxy: {
// 字符串简写写法
'/foo': 'http://localhost:4567',
// 选项写法
"/zlhx": {
target: "http://localhost:8008",
changeOrigin: true,
rewrite: path => path.replace(/^\/zlhx/, "zlhx")
}
// 正则表达式写法
'^/fallback/.*': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/fallback/, '')
},
// 使用 proxy 实例
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
configure: (proxy, options) => {
// proxy 是 'http-proxy' 的实例
}
},
// Proxying websockets or socket.io
'/socket.io': {
target: 'ws://localhost:3000',
ws: true
}
}
},
// 插件
plugins: [
vue(),
viteMockServe()
]
})
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhiahkeg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22