我们之前写项目一直是使用npm进行运行webpack的项目,而运行webpack的项目会造成一种问题,那么就是运行的时候很长,可能很多人在面对这种情况就会觉得很难受,随着vue3的使用越来越多和vue3一起使用的还有一个前端开发与构建工具,拿就是vite。
vite的使用使我们打包,运行项目的速度都有了进一步的提高,那么接下来我们来看看vite的一些配置,该配置主要包含项目的运行服务、打包、以及插件的使用。下面配置vite必须高于或者等于2.0以上的版本,node版本在14以上,我使用的是14.16.1版本。
base:公共路径配置,完整的url或者空字符串或者./或者绝对url路径
base: '' // 空串
base: './' // ./路径
base: '/test/' // 绝对url路径
base: 'http://baidu.com/' // 绝对url路径
publicDir:静态资源服务的文件夹,打包上线后,所对应的文件夹名称
publicDir:'/' // 开发环境
publicDir:'test' // 上线修改配置
resolve.alias: 配置别名,类型数组,里面是对象,find对应查找方式,replacement对应路径
resolve: {
alias: [
{ find: "@", replacement: resolve(__dirname, "../src") },
],
},
满足以上配置基本上base就可以ok了。
host:ip,在vite脚手架初次下载下来是没有host,只有localhost,当我们需要使用ip时是没有办法的,这个时候我们可以设置host就行
host:0.0.0.0 //运行后就是你自己的本机ip
port:端口号
port:8081
strictPort:设置为true,若端口已被占用则会直接退出,反之为false,尝试下一个端口
strictPort:true
open:打开浏览器,直接设置为true,打开默认浏览器
open: true
outDir:输出路径,加/是为了访问资源文件。
outDir: '/test'
assetsDir:静态资源的存放路径,图片、js、css存放位置
assetsDir: 'static'
chunkSizeWarningLimit:chunk 大小警告的限制, 单位kbs,超过这个范围会报警告
chunkSizeWarningLimit:100
terserOptions:传递给 Terser 的更多 minify 选项,其用法参数比较多,我这里主要用来去掉打印和断点
terserOptions: {
compress: {
drop_console: false, //去掉console
drop_debugger: false, // 去掉debugger
},
},
rollupOptions:自定义底层的 Rollup 打包配置,我这里添加配置,主要去做压缩文件。
rollupOptions: {
output: {
chunkFileNames: "static/js/[name]-[hash].js",
entryFileNames: "static/js/[name]-[hash].js",
assetFileNames: "static/[ext]/[name]-[hash].[ext]",
manualChunks: id => {
// 使用函数形式时,每个解析的模块 id 都会传递给函数。
// 如果返回字符串,则模块及其所有依赖项将添加到具有给定名称的手动块中。
// 例如,这将创建一个vendor包含所有依赖项的块node_modules:
if (id.includes("node_modules")) {
return id.toString().split("node_modules/")[1].split("/")[0].toString();
}
},
},
},
plugins:数组类型。其中存放插件,通过插件进行整合,开启gzip压缩、图片压缩、ui组件引入
import legacyPlugin from "@vitejs/plugin-legacy";
import vue from "@vitejs/plugin-vue";
// import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// import imageminPlugin from "vite-plugin-imagemin"
// import Components from "unplugin-vue-components/vite";
import compressionPlugin from "vite-plugin-compression";
plugins: [
vue(),
Components({
resolvers: [
ElementPlusResolver({
importStyle: "sass",
}),
],
}),
/**
* 浏览器兼容
*/
legacyPlugin({
targets: ["chrome >= 40", "ie >= 11"],
additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
}),
/**
* 执行gzip压缩
*/
compressionPlugin({
ext: ".gz",
algorithm: "gzip",
deleteOriginFile: false, // 设置为true,删除打包好的
threshold: 500,
}),
]
"/api": {
target: "http://jsonplaceholder.typicode.com",
changeOrigin: true,
rewrite: (path: string) => path.replace(/^\/api/, ""),
},
以上就是本人对前端vite这块的一些简单的理解,希望对大家有所帮助。