Vue3中如何配置vue.config.js以实现特定功能？

本文共计883个文字，预计阅读时间需要4分钟。

目录 + 错误处理 + 打包时提示文件过大，配置解决方案，如下 + 总结 + 错误 + asset size limit: 以下资产（s）超过推荐大小限制（2.44 KiB）。这可能会影响网站性能。entrypoint size limit: 以下 +

目录

• 报错
• 打包时提示文件过大，配置解决方案，如下
• 总结

报错

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:

打包时提示文件过大，配置解决方案，如下

直接设置文件的压缩率就可以

//核心代码 configureWebpack: (config) => { if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置... config.mode = 'production'; config["performance"] = {//打包文件大小配置 "maxEntrypointSize": 10000000, "maxAssetSize": 30000000 } } }

上代码：

const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, assetsDir: 'static', productionSourceMap: false, chainWebpack: config => { config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('src/assets')) .set('components', resolve('src/components')) }, configureWebpack: (config) => { if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置... config.mode = 'production'; config["performance"] = {//打包文件大小配置 "maxEntrypointSize": 10000000, "maxAssetSize": 30000000 } } } })

还有一种方法就是对其进行压缩

安装依赖

npm install compression-webpack-plugin --save-dev

在vue.config.js中引用

const CompressionWebpackPlugin = require("compression-webpack-plugin");

配置压缩文件

datav-vue:一个基于Vuejs3的数据可视化（DataV）项目下载地址：点击这里

const productionGzipExtensions = ["js", 'css'];

配置对超过大小文件进行压缩

new CompressionWebpackPlugin({ filename: "[path][base].gz", algorithm: "gzip", test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), //匹配文件名 threshold: 10240, //对10K以上的数据进行压缩 minRatio: 0.8, deleteOriginalAssets: false //是否删除源文件 })

下面时完整代码

const { defineConfig } = require('@vue/cli-service') const path = require('path'); const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩， 按需引用 const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 开启gzip压缩， 按需写入 const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV); const resolve = (dir) => path.join(__dirname, dir); const TerserPlugin = require('terser-webpack-plugin')//去除多余的console.log module.exports = defineConfig({ transpileDependencies: true, assetsDir: 'static', productionSourceMap: false, integrity: true, crossorigin: undefined, chainWebpack: config => { config.resolve.symlinks(true); // 修复热更新失效 // 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中 config.plugin("html").tap(args => { // 修复 Lazy loading routes Error args[0].chunksSortMode = "none"; return args; }); config.resolve.alias // 添加别名 .set('@', resolve('src')) .set('@assets', resolve('src/assets')) .set('@components', resolve('src/components')) .set('@views', resolve('src/views')) .set('@store', resolve('src/store')); // 压缩图片 // 需要 npm i -D image-webpack-loader config.module .rule("images") .use("image-webpack-loader") .loader("image-webpack-loader") .options({ mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: false }, pngquant: { quality: [0.65, 0.9], speed: 4 }, gifsicle: { interlaced: false }, webp: { quality: 75 } }); }, configureWebpack: (config) => { // 开启 gzip 压缩 // 需要 npm i -D compression-webpack-plugin const plugins = []; if (IS_PROD) { plugins.push( new CompressionWebpackPlugin({ filename: '[path].gz[query]', algorithm: 'gzip', test: productionGzipExtensions, threshold: 10240,//大于10k的进行压缩 minRatio: 0.8, }) ); plugins.push( //打包环境去掉console.log等 new TerserPlugin({ terserOptions: { ecma: undefined, warnings: false, parse: {}, compress: { drop_console: true, drop_debugger: false, pure_funcs: ['console.log'], // 移除console }, }, }), ); } config.plugins = [...config.plugins, ...plugins]; }, })

我这个是最方法，大家可以复制到自己的项目中直接使用，我的是5.x的webpack，同类型版本的可以直接使用 需要nginx也配合使用压缩，开启全局localhost:8080' // 配置跨域处理,只有一个代理 proxy: { //配置多个跨域 "/api": { target: "172.11.11.11:7071", changeOrigin: true, // ws: true,//websocket支持 secure: false, pathRewrite: { "^/api": "/" } }, "/api2": { target: "172.12.12.12:2018", changeOrigin: true, //ws: true,//websocket支持 secure: false, pathRewrite: { "^/api2": "/" } }, } } }

总结

到此这篇关于vue3中vue.config.js配置及注释详解的文章就介绍到这了,更多相关vue3 vue.config.js配置详解内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！