为开发提供极速响应v4.1.0
目前Vite已经更新到v4.1.0的版本了
vite的特性
- 💡极速的服务启动，意思就是一个字快
- ⚡️轻量快速的热重载，就是说热更新也很快
- 🔧丰富的功能，支持的工具集比较多，开箱即用
- 📦优化的构建 对于生产环境的构建有更好的优化
- 🔩通用的插件，在开发和构建之间共享 Rollup-superset 插件接口。
- 完全类型化的API 使用TS，有较好的语法提示和类型支持
使用Vite创建项目
使用npm
<pre data-language="go" id="lYMaM" class="ne-codeblock language-go" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">npm create vite@latest</pre>
使用yarn
<pre data-language="bash" id="p4WJ8" class="ne-codeblock language-bash" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">yarn create vite</pre>
使用pnpm
<pre data-language="bash" id="APdU4" class="ne-codeblock language-bash" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">pnpm create vite</pre>
如果使用vite创建Vue项目的话，可以创建带模版的vue项目
<pre data-language="bash" id="bI5QC" class="ne-codeblock language-bash" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959"># npm 6.x
npm create vite@latest my-vue-app --template vue
npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue
yarn
yarn create vite my-vue-app --template vue
pnpm
pnpm create vite my-vue-app --template vue</pre>
查看 create-vite 以获取每个模板的更多细节：vanilla，vanilla-ts, vue, vue-ts，react，react-ts，react-swc，react-swc-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。
区分开发环境，测试环境和生产环境
首先在项目根目录下创建.env文件,Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量
<pre data-language="javascript" id="K85Vx" class="ne-codeblock language-javascript" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">.env # 所有情况下都会加载
.env.local # 所有情况下都会加载，但会被 git 忽略
.env.[mode] # 只在指定模式下加载
.env.[mode].local # 只在指定模式下加载，但会被 git 忽略
.env.development # 开发模式
.env.production # 生产模式
.env.test # 测试模式
</pre>
默认情况下
- npm run dev 会加载 .env 和 .env.development 内的配置
- npm run build 会加载 .env 和 .env.production 内的配置
- mode 可以通过命令行 --mode 选项来重写。
在package.json文件中配置一个test命令
环境加载优先级
一份用于指定模式的文件（例如 .env.production）会比通用形式的优先级更高（例如 .env）。
另外，Vite 执行时已经存在的环境变量有最高的优先级，不会被 .env 类文件覆盖。例如当运行 VITE_SOME_KEY=123 vite build 的时候。
.env 类文件会在 Vite 启动一开始时被加载，而改动会在重启服务器后生效
<pre data-language="javascript" id="TEjAO" class="ne-codeblock language-javascript" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">console.log('获取当前目录',process.cwd());
//参数：模式：development||production,入口文件，修改.env变量前缀
const env=loadEnv('development',process.cwd(),'wmq')
console.log(env);</pre>
加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。
为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码
所以这里如果没配置前缀的话，import.meta.env 就访问不到了
<pre data-language="javascript" id="oDI0e" class="ne-codeblock language-javascript" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">VITE_BASE_API=base/api 这个可以被访问到
wmq_client='aa🤔'。访问不了</pre>
然后在main.js文件中去打印import.mate.env的环境变量，在不同的开发模式下就可以获取到相应的环境变量了
开发模式下
生产模式下
测试模式下
通过验证我们可以看出，不管是什么模式下，都可以加载到.env文件中的变量
更改.env的默认地址
我们现在的.env文件都是建立在根目录的，如果.env.XX的文件太多，会显得我们的项目目录很乱，我们能将.env放在一个统一的文件夹内吗？
可以通过envDir配置来改变！参考：共享配置 | Vite 官方中文文档
envDir用于加载 .env 文件的目录。可以是一个绝对路径，也可以是相对于项目根的路径。
- 类型： string
- 默认： root
比如，我们在vite.config.js中这样配置
<pre data-language="javascript" id="Ks4H2" class="ne-codeblock language-javascript" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">import { defineConfig } from "vite";
export default defineConfig( {
envDir:"env"
});</pre>
然后，所有的.env.xxx文件就可以放在项目根目录的env文件夹下了。
配置服务端选项
<pre data-language="javascript" id="DW1to" class="ne-codeblock language-javascript" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">export default defineConfig({
server: {
host: 'localhost',// 开放服务器启动的地址，默认时localhost
port: 9000,//项目启动端口
open: true,//项目启动时是否打开浏览器
base:'/',//用于代理 Vite 作为子文件夹时使用。
cors: true,//为开发服务器配置 CORS。默认启用并允许任何源，传递一个 选项对象 来调整行为或设为 false 表示禁用。
headers:{},//指定服务端响应的headers信息
strictPort:true,//设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口。
proxy: {//配置后端代理
// 字符串简写写法
'/foo': 'http://localhost:4567',
// 选项写法
'/api': {
target: 'http://jsonplaceholder.typicode.com',//指向后端地址
changeOrigin: true,//允许跨域
rewrite: (path) => path.replace(/^/api/, '')
},
// 正则表达式写法
'^/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
}
}，
}
})
</pre>
server
其中server是比较常用的重要属性，特别是proxy主要是配置代理后端API地址的
- target
- changeOrigin
- rewrite
服务端的选项常用的大概就这些了，期中最常用的就是解决开发过程中的跨域问题了，需要在proxy里面去设置即可，其他的不常用的选项如有用到去查vite官网的[**服务器选项**](https://vitejs.cn/vite3-cn/config/server-options.html)
配置CSS
<pre data-language="javascript" id="MMetb" class="ne-codeblock language-javascript" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">export default defineConfig({
//css配置
css: {
// 开发模式为true，生产模式为flase, devSourcemap:true,//源代码映射
devSourcemap:command === 'serve',
// css模块化配置项
modules:{
// 是否开启模块化。模块化or全局化
scopeBehaviour: 'global' | 'local',
// css模块化的路径
globalModulePaths: RegExp[],
// 更改生成的哈希名称，一个字符串模板或者通过函数返回
generateScopedName: string| ((name, filename, css) => string),
// 生成hash名称的前缀
hashPrefix: string,
// 修改生成的配置对象的key的展示形式(驼峰还是中划线形式)
localsConvention:'camelCase'
| 'camelCaseOnly'
| 'dashes'
| 'dashesOnly'
| null
},
// 预处理器配置项
preprocessorOptions: {
less: {
math: "always",
},
scss: {
additionalData: '@import "src/assets/styles/var.scss";'
}
},
postcss:{
// 一些配置
}
}
})</pre>
css的配置主要是一些css的模块化和预处理器的配置。比如scss，less，postcss等等
模块化属性
- scopeBehaviour：是否开启模块化，global为全局化，local为模块化
- globalModulePaths：css模块化的路径
- generateScopedName：生成的哈希名称，一个字符串模板或者通过函数返回
- hashPrefix：生成hash名称的前缀
- localsConvention：生成的配置对象的key的展示形式(驼峰还是中划线形式)
其他的less，scss，postcss属性使用的时候查询官方文档即可
其他的一些常用小配置
配置别名
<pre data-language="javascript" id="P0Efc" class="ne-codeblock language-javascript" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">export default defineConfig({
resolve:{
alias:{
'@': resolve(__dirname, 'src')//配置别名
}
}
})</pre>
打包速度的问题
vite在打包中会计算包的大小，但是只是计算不做处理，会长打包时间，所以可以在build中再添加一个配置项关闭打包计算。
启用/禁用 gzip 压缩大小报告。压缩大型输出文件可能会很慢，因此禁用该功能可能会提高大型项目的构建性能。
<pre data-language="c" id="Oxztu" class="ne-codeblock language-c" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">brotliSize: false,//vite2
reportCompressedSize:false //vite3</pre>
gizp压缩
<pre data-language="javascript" id="aVOQC" class="ne-codeblock language-javascript" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">plugins: [vue(),
viteCompression({
//生成压缩包gz
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz',
}),],</pre>
我把打包后的项目用express稍微搭了个后台跑了一下，发现express开启了gzip和没开启gzip，都是一样的。不知道vite是不是默认启动gzip压缩？有了解的小伙伴也可以说一下。
生产环境移除console
<pre data-language="javascript" id="mUOLt" class="ne-codeblock language-javascript" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">build:{
...
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
}</pre>
以上就是vite的一些常用的项目配置了，基本上绝大多数都是在项目中需要经常使用的，而且随着前端技术的不断发展，构建工具也是在不停的更新迭代，作为技术人员也得紧跟技术潮流，也许你现在的项目用的不是vite，但是你不能说你不会，所谓技多不压身嘛，小伙伴们赶紧学起来吧！🚀
