介绍
官方github
https://github.com/vitejs/vite
Vite是Vue官方开发的
构造
1、开发服务器
基于原生ES模块,现代浏览器都支持ES模块化(import、export),能直接运行,省去了webpack构建的过程(webpack每次修改都会自动构建一次,把构建的文件放到内存运行)
那是不是不用构建工具?肯定是要的。
1、因为你还有很多文件,如.vue,.ts,.less等文件,这些浏览器是无法直接识别。而Vite会把这些文件转成JS,让他和其他JS代码跑在浏览器上。
2、如果你项目依赖很多包,没有构建工具的情况下,浏览器访问会全部一次请求过来,可能会有几百个文件,严重影响浏览器和服务器性能。而Vite用到哪些包,才请求哪些包,不需要一次请求过来。
服务器原理
vite1 之前是用Koa作为本地服务器,后来改为了Connect,因为这个服务器很容易做请求的转发。
比如我编写了xxx.ts,这个浏览器是不支持的,启动服务器时,Vite会把xxx.ts转换成ES6 JS代码。
用户访问服务器时,Connect服务器看到你要xxx.ts文件,他就会给你转换成JS代码的文件
2、打包构建指令 ESBuild
ESBuild 是Go语言实现的,所以可以支持Go的API
(可能有些夸大)
ESBuild为什么这么快呢?
1、使用Go语言编写的,可以直接转换成机器代码,而无需经过字节码;
2、ESBuild可以充分利用CPU的多内核,尽可能让它们饱和运行;
3、ESBuild的所有内容都是从零开始编写的,而不是使用第三方,所以从一开始就可以考虑各种性能问题;
=======================
在项目内安装
安装Vite
(官方是推荐直接用命令创建项目)
npm install vite –g # 全局安装
npm install vite –D # 局部安装
全局安装:任意一个地方打开命令行,都可以运行vite命令。好处就是全局都可以运行
局部安装:只在项目里面安装,需要在项目内打开命令行,输入npx vite命令才能运行。好处就是项目兼容性好,不会因为全局的vite版本影响项目。
查看版本
vite -v
安装和配置Vue3
如果不是通过官方直接创建项目的话,Vite是不自带Vue的,目的就是希望不只是Vue用Vite,其他如React也可以用Vite
1、安装Vue3
npm i vue@next -D
2、引入Vue3
然后在入口main.js引入Vue3,和Vue入口APP组件
挂载App组件到一个ID为app的元素
3、安装插件
然后安装插件,让Vite对Vue支持
Vue3插件
npm install @vitejs/plugin-vue -D
sfc插件(单文件组件,也就是识别 .vue 文件的插件)
npm install @vue/compiler-sfc -D
4、配置
最后创建vite的配置文件:vite.config.js,然后配置插件
=======================
启动本地开发服务器
全局安装的情况下启动:
cd D:/项目的路径
vite
局部安装的情况下启动:
cd D:/项目的路径
npx vite
如果是用vscode作为编辑器,在左下角可以看到NPM脚本,直接点一下就运行局部安装的vite了,非常方便
构架生产环境-Vue3项目
全局安装的情况下启动:
cd D:/项目的路径
vite build
局部安装的情况下启动:
> cd D:/项目的路径
> npx vite build
预览生成环境项目
正常我们要把dist里面构架好的文件,放到WEB服务器里面运行,比如微软的IIS、Tomcat、Apache、Nginx等
而Vite提供预览,方便我们跳过这个步骤
全局安装Vite的情况:
vite preview
局部安装Vite的情况:
npx vite preview
配置脚本
后面直接运行npm run 命令 即可
=======================
Vite脚手架创建Vue3项目
帮你局部安装了vite,安装了Vue3和Vue3插件
> cd D:/项目的路径
> npm init @vitejs/app
会询问用什么框架,可以根据自己的项目选择,目前支持vue和react等,
然后问你要不要ts
如果选ts,配置会自动变成ts
然后可以直接用ts,无需额外安装其他东西
=======================
其他配置
默认有隐藏的配置,免得你手动去弄,开箱即用。
但是如果你想自己配置,也可以。默认是在项目主目录下创建一个名为 vue.config.js 的文件
别名 alias
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock';
export default defineConfig(({command}) => {
return {
resolve: {
alias: {
'@': '/src',
}
},
plugins: [
vue(),
],
};
});
如果是用TS,tsconfig.json里面还要配置一下path 才行,否则ts会报错说找不到对应模块
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"paths":{
"@/*": ["./src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
开发服务器代理 proxy (重要,解决跨域)
注意!只有在开发dev时有效,打包部署上线时无效
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// 定义 vite 的配置
export default defineConfig(({ command }) => {
return {
resolve: {
// 路径别名
alias: {
'@': path.resolve(__dirname, 'src'),
}
},
// 服务器选项
server: {
// http-proxy 代理,原理是改变其他电脑发送请求头RequestHeader的源Origin,
// 使得每台电脑的源Origin = 服务器端设置的响应头ResponseHeader的 Access-Control-Allow-Origin 属性,
// 浏览器就不会因为安全问题而报错
proxy: {
// 固定写法,如果写成'/'会导致Error: socket hang up
'/api': {
// target: 'http://你的前端服务器IP:前端服务器端口'
target: 'http://192.168.0.185:3000',
// target: 'http://111.230.235.172',
// 是否改变每台访问前端服务器的浏览器的源Origin?true为改变
changeOrigin: true,
// 固定写法,因为上面写了/api,实际上我们的请求都不带api,这里要替换掉
rewrite: (path) => path.replace(/^\/api/, '')
},
}
},
plugins: [
vue(),
],
};
});
后面axiso的请求要写为:
const testFunction = () => {
axios({
baseURL:'/api', // 注意,proxy查找的'/api',是查找baseURL的,并不是查找下面的url,然后会自动把'/api'替换成target
url:"/testFun",
method:"get",
}).then((res) => {
console.log(res);
});
};
跨域可以查看 https://www.yuque.com/yejielin/mypn47/krxlh0#AbU2x
特点
CSS 和 JSON
可以直接import进来使用
其他CSS
官方文档有说明,Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件,但必须安装相应的预处理器依赖:
# .scss and .sass
npm install -D sass
# .less
npm install -D less
# .styl and .stylus
npm install -D stylus
路径url
可以使用绝对路径和相对路径。
如果用了绝对路径,打包生产时,就会把文件放入dist文件夹内然后对文件名进行哈希化。
JSX
支持,直接写jsx文件即可
第三方包预编译
第一次启动vite服务器的时候,会对较大的第三方包进行预编译,然后储存到node_modules/.vite 文件夹内。
一般这些包是不随随便便修改或者升级的,因此下次再启动直接来读取这部分的代码,就不用再编译了,启动就更快了。
========================
插件plugin
组件按需加载(重要)
根据目前比较强大的UI组件库 Ant Design Vue 2.x 的介绍 https://2x.antdv.com/docs/vue/introduce-cn/,有一个名为 vite-plugin-components 的插件可以做到按需加载组件,并且很多UI组件都支持,如下
于是查了一下官方说明:https://github.com/hannoeru/vite-plugin-components,发现还是比较强大的,连其他组件都无需通过components注册了,但是仅限于 /src/components下的 .vue 组件(不管套多少层文件夹,只要在components文件夹下就行)
安装:
npm i vite-plugin-components -D
# 或者
yarn add vite-plugin-components -D
插件配置(TS版本):
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 1、引入插件
import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';
export default defineConfig({
plugins: [
vue(),
// 2、使用插件
ViteComponents({
customComponentResolvers: [AntDesignVueResolver()],
}),
]
})
更多插件
https://github.com/vitejs/awesome-vite
LESS
css的一种增强的插件,可以查看 https://www.yuque.com/yejielin/mypn47/ghbmfu
安装:
npm i less -D
配置:
不用配置,直接可以写xxx.less文件,vite会自动处理
POSTCSS
css前缀转换工具
安装:
npm install postcss-loader -D
安装后,要对应的功能要安装对应的插件
安装对应插件:
比如下面的是自动添加浏览器前缀,用于适配其他浏览器
npm install postcss-preset-env -D
配置:
创建postcss.config.js ,输入配置
mock模拟数据
https://github.com/anncwb/vite-plugin-mock/blob/main/README.zh_CN.md
配置见别名