vue.config.js中打包相关配置

于 2024-01-20 14:03:34 发布
阅读量1k 收藏 12
点赞数 7
分类专栏： Vue2 文章标签： javascript vue.js 前端
未经csdn博主（前端-尔嵘）允许不得转载，转载请注明转载路径及说明！
本文链接：https://blog.csdn.net/XU441520/article/details/135714888
版权

1.原始篇

let path = require('path');
const webpack = require('webpack');
const ThemeColorReplacer = require('webpack-theme-color-replacer');
const { getThemeColors, modifyVars } = require('./src/utils/themeUtil');
const { resolveCss } = require('./src/utils/theme-color-replacer-extend');
const CompressionWebpackPlugin = require('compression-webpack-plugin');

// const productionGzipExtensions = ['js', 'css'];
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
const isProd = process.env.NODE_ENV === 'production';

const assetsCDN = {
    // webpack build externals
    externals: {
        // vue: 'Vue',
        // 'vue-router': 'VueRouter',
        // vuex: 'Vuex',
        // axios: 'axios',
        // nprogress: 'NProgress',
        // clipboard: 'ClipboardJS',
        // '@antv/data-set': 'DataSet',
        // 'js-cookie': 'Cookies',
        // AMap: "window.AMap"
    },
    css: [
        // '//at.alicdn.com/t/font_2338481_gghb7xktb5.css'
    ],
    js: [
        // '//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
        // '//cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js',
        // '//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',
        // '//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
        // '//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js',
        // '//cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js',
        // '//cdn.jsdelivr.net/npm/@antv/data-set@0.11.4/build/data-set.min.js',
        // '//cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js'
    ]
};

module.exports = {
    lintOnSave: false,
    devServer: {
        // host: "localhost",
        open: true,
        port: 8088,
        
        //配置几个跨域接口
        proxy: {
            '/v2/city/lookup': {
                target: 'https://geoapi.qweather.com', //请求城市定位区域接口地址
                changeOrigin: true, //是否跨域
                // pathRewrite: {
                //     '^/api': '' //路径重写
                // }
            },
            '/v7/weather/now': {
                target: 'https://devapi.qweather.com', //请求指定区域的接口
                changeOrigin: true,  //是否跨域
                // pathRewrite: {
                //     '^/api': '' //路径重写
                // }
            }
        }
    },
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [path.resolve(__dirname, "./src/theme/theme.less")],
        }
    },
    configureWebpack: config => {
        config.entry.app = ["babel-polyfill", "whatwg-fetch", "./src/main.js"];
        config.performance = {
            hints: false
        };
        config.plugins.push(
            new ThemeColorReplacer({
                fileName: 'css/theme-colors-[contenthash:8].css',
                matchColors: getThemeColors(),
                injectCss: true,
                resolveCss
            })
        );
        // Ignore all locale files of moment.js
        config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
        // 生产环境下将资源压缩成gzip格式
        if (isProd) {
            // add `CompressionWebpack` plugin to webpack plugins
            config.plugins.push(new CompressionWebpackPlugin({
                algorithm: 'gzip',
                // test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                test: productionGzipExtensions,
                threshold: 4096,
                minRatio: 0.8
            }))
        }
        // if prod, add externals
        if (isProd) {
            config.externals = assetsCDN.externals
        }
    },
    chainWebpack: config => {
        // 生产环境下关闭css压缩的 colormin 项，因为此项优化与主题色替换功能冲突 
        if (isProd) {
            config.plugin('optimize-css')
                .tap(args => {
                    args[0].cssnanoOptions.preset[1].colormin = false;
                    return args
                })
        }
        // 生产环境下使用CDN
        if (isProd) {
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = assetsCDN;
                    return args
                })
        }
    },
    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    modifyVars: modifyVars(),
                    javascriptEnabled: true
                }
            }
        }
    },
    publicPath: './',
    outputDir: 'distM',
    assetsDir: '',
    productionSourceMap: false
};

2.改进篇

let path = require('path');
const webpack = require('webpack');
const ThemeColorReplacer = require('webpack-theme-color-replacer');
const { getThemeColors, modifyVars } = require('./src/utils/themeUtil');
const { resolveCss } = require('./src/utils/theme-color-replacer-extend');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// const productionGzipExtensions = ["js", "css"];
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
const isProd = process.env.NODE_ENV === 'production';

const assetsCDN = {
    // webpack build externals
    externals: {
        //不需要打包进来的资源
        // vue: 'Vue',
        // vuex: 'Vuex',
        // 'vue-router': 'VueRouter',
        // axios: 'axios',
        // nprogress: 'NProgress',
        // clipboard: 'ClipboardJS',
        // '@antv/data-set': 'DataSet',
        // 'js-cookie': 'Cookies',
        // AMap: "window.AMap"
    },
    css: [
        // '//at.alicdn.com/t/font_2338481_gghb7xktb5.css'
    ],
    js: [
        // '//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
        // '//cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js',
        // '//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',
        // '//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
        // '//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js',
        // '//cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js',
        // '//cdn.jsdelivr.net/npm/@antv/data-set@0.11.4/build/data-set.min.js',
        // '//cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js'
    ]
};
let timeStamp = new Date().getTime();
module.exports = {
    publicPath: './',
    outputDir: 'distM',
    assetsDir: '',
    productionSourceMap: false, // 是否为生产环境构建生成 source map？
    lintOnSave: false, //是否开启eslint保存检测,有效值: true || false || 'error'
    devServer: {
        // host: "localhost",
        open: true,
        port: 8087,
        overlay: {
            errors: false,
            warnings: false
        },

        //配置几个跨域接口
        proxy: {
            '/v2/city/lookup': {
                target: 'https://geoapi.qweather.com', //请求城市定位区域接口地址
                changeOrigin: true, //是否跨域
                // pathRewrite: {
                //     '^/api': '' //路径重写
                // }
            },
            '/v7/weather/now': {
                target: 'https://devapi.qweather.com', //请求指定区域的接口
                changeOrigin: true,  //是否跨域
                // pathRewrite: {
                //     '^/api': '' //路径重写
                // }
            }
        }
    },
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [path.resolve(__dirname, "./src/theme/theme.less")]
        }
    },
    configureWebpack: config => {
        config.entry.app = ["babel-polyfill", "whatwg-fetch", "./src/main.js"];
        config.performance = {
            hints: false
        };
        config.plugins.push(
            new ThemeColorReplacer({
                fileName: 'css/theme-colors-[contenthash:8].css',
                matchColors: getThemeColors(),
                injectCss: true,
                resolveCss
            })
        );
        // 生产环境下将资源压缩成gzip格式
        if (isProd) {
            // add `CompressionWebpack` plugin to webpack plugins
            config.plugins.push(
                // Ignore all locale files of moment.js 2024-01-18
	            new webpack.IgnorePlugin(/^\.\/locale$/,/moment$/),
                new CompressionWebpackPlugin({
                    algorithm: 'gzip',
                    // test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
                    test: productionGzipExtensions,
                    threshold: 4096, //对4K以上的数据进行压缩
                    minRatio: 0.8,
                }),
                /**
                 * 新增限制 2024-01-18
                 * maxChunks：使用大于或等于 1 的值，来限制 chunk 的最大数量。使用 1 防止添加任何其他额外的 chunk，这是因为 entry/main chunk 也会包含在计数之中。
                 * minChunkSize: 设置 chunk 的最小大小。
                 * 限制打包的个数(减少打包生成的js文件和css文件)
                 */
                new webpack.optimize.LimitChunkCountPlugin({
                    maxChunks: 10,
                    minChunkSize: 100
                }),
            )
        }
        // if prod, add externals
        if (isProd) {
            config.externals = assetsCDN.externals
        }
    },
    chainWebpack: config => {
        if (isProd) {
            // 移除 prefetch 插件
            config.plugins.delete('prefetch');
            // 移除 preload 插件
            config.plugins.delete('preload');
            // 压缩代码
            config.optimization.minimize(true);
            // 分割代码
            config.optimization.splitChunks({
                chunks: 'all'
            });
            // 生产环境下关闭css压缩的 colormin 项，因为此项优化与主题色替换功能冲突 
            config.plugin('optimize-css')
                .tap(args => {
                    args[0].cssnanoOptions.preset[1].colormin = false;
                    return args
                })
            // 生产环境下使用CDN
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = assetsCDN;
                    return args
                })
        }
    },
    css: {
        extract: { // 打包后css文件名称添加时间戳 2024-01-18
            filename: `css/[name].[hash:8].${timeStamp}.css`,
            chunkFilename: `css/chunk.[id].[hash:8].${timeStamp}.css`,
        },
        loaderOptions: {
            less: {
                lessOptions: {
                    modifyVars: modifyVars(),
                    javascriptEnabled: true
                }
            }
        }
    },
    // chunks: ['chunk-vendors', 'chunk-common']
};

通过对chunk生成的css和js文件数量和大小做限制，对代码进行压缩和分割，线上生产环境下使用cdn方式等对webpack打包优化。

尔嵘
关注
  • 7
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue.config.js
10-17
vue.config.js用于配置vue项目，配置开发环境，打包环境，端口、目录等
vue.config.js配置介绍
05-06
vue.config.js配置 vue.config.js配置介绍 vue.config.js配置介绍 `vue.config.js` 是 Vue CLI 3.x+ 的配置文件，用于配置 Vue 项目的构建和开发过程中的各种配置选项。下面是一些常见的配置选项及其说明： 1. `publicPath`: 指定打包后静态资源的基础路径，默认值为 `/`。可以通过该选项配置 CDN 的地址或者指定其他的路径。 2. `outputDir`: 指定打包后的文件输出目录，默认值为 `dist`。 3. `assetsDir`: 指定打包后静态资源（js、css、img 等）的目录，默认值为 `assets`。 4. `indexPath`: 指定打包后的 index.html 文件路径，默认值为 `index.html`。 5. `productionSourceMap`: 是否生成生产环境的 source map，默认值为 `true`。可以通过设置为 `false` 来减少构建时间，但是这会使得调试时比较困难。 6. `configureWebpack`: 如果需要更细粒度的控制
vue-cli3优化配置
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-10 1817
说明 本文转载自：张雪冬前端工程师学习园地-vue-cli3优化配置 1.使用cdn引入不改变的第三方库 const cdn = { // 忽略打包的第三方库 externals: { vue: 'Vue', vuex: 'Vuex', 'vue-router': 'VueRouter', axios: 'axios' }, // 通过cdn方式使用 js: [ 'https://cdn.bootcss.com/vue/2.6.11/vue.ru
【vue3】vue.config.js打包配置（vue3 + webpack + 多环境）
zxsy19966的博客
11-02 1万+
【VUE3】vue.config.js打包配置
Vue build 打包和部分vue-config-js配置
王飞
05-28 9454
vue 打包 当我们使用vue写好项目后我们需要将项目进行打包成html项目，使用一下命令可以打包项目。 npm run build 在当前目录下输入打包命令，等待打包完成后在根目录生成一个dist的文件夹，里面是html页面和css，js，img文件夹。 -- dist -- css -- js -- img -- index.html 当然这个html项目我们无法通过双击的形式打开，我们需要创建一个服务才能运行此项目。 vue-config-js配置 在vue项目里创建vue.con
vue项目打包优化---vue-config.js的常用配置项
weixin_42889916的博客
06-14 5933
本文主要讲了vue-config.js的几个常用配置项，和打包优化npm的插件。
Oasis 物理第四弹：角色控制器驱动人物动画
小王的技术库
09-28 362
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取。
如何搭建一个完整的Vue3.0 + ts 的项目
sinat_28371057的博客
12-13 4793
如何搭建一个完整的Vue3.0 + ts 的项目 相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段（最终产品的候选版本，如果没有问题则可发布成为正式版本）。所以Vue3.0的学习是我们必然的趋势，今天，主要分享一下Vue3.0的详细搭建过程，希望可以为初入Vue3的小伙伴有所帮助。 我们现在开始进入今天的主题啦~~ 一、安装 1. 安装nodejs 此处提供nodejs下载地址：https://nodejs.org/zh-cn/dow..
vue项目打包优化及配置vue.config.js文件（实测有用）
weixin_46824709的博客
07-28 1万+
/是否为生产环境//本地环境是否需要使用cdn//cdn链接//cdn模块名称和模块作用域命名（对应window里面挂载的变量名称）externals{'vue''Vue','vuex''Vuex','axios''axios'},//cdn的css链接css[],//cdn的js链接js['https'https'https'https]}//打包配置文件assetsDir'static','./',https。...
vue项目打包vue.config.js万能配置
08-09 6920
assetsDir: "static",//设置放置打包生成的静态资源 (js、css、img、fonts) 的目录。indexPath: 'index.html'//用于设定打包生成的 index.html 文件的存储位置。lintOnSave: false,// eslint-loader 是否在保存的时候检查。outputDir: "dist",// 输出文件目录。publicPath: "./",// 基本路径。port: 8080, // 端口号。...
如何配置vue.config.js 处理static文件夹下的静态文件
10-15
主要介绍了如何配置vue.config.js 处理static文件夹下的静态文件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
01-21
1.在vue项目根目录下新建vue.config.js（不是在src下面） vue.config.js配置文件： module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser compiler? // https://vuejs.org/v2/guide/installation.html#Runtim
vue-cli 图片打包成base64的大小限制配置文件件 vue.config.js
11-17
vue-cli 图片打包成base64的大小限制配置文件件 vue.config.js
Vue Cookie的使用
W_Zhulin的博客
05-25 1354
1、下载安装 npm install js-cookie --save 2、然后就可以直接在组件中引入 import Cookies from 'js-cookie' 3、存到cookie //创建一个在整个网站上有效的cookie： //特使时候cookie存入的对象，跟一般使用不同的是，从Cookie中取出的时候，要从字符串转换成json格式 Cookies.set('name', { id: 1, name: 'XXX' }) //创建一个从现在起7天到期的cookie，该cookie在整个网站
Vue基础知识总结 9：vue webpack打包原理
学Java，找哪吒
10-06 2万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 一、前端模块化 webpack是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。 并且不仅仅是JavaScript文件，还有CSS、图片、json文件等等，在webpack中都可以被当做模块来使用。 二、打
vue.config.js vue 打包配置
qzonemen的专栏
09-27 1437
const CompressionWebpackPlugin = require('compression-webpack-plugin') const productionGzipExtensions = ['js', 'css'] const Timestamp = new Date().getTime(); module.exports = { publicPath: './', productionSourceMap: false, // false : 不生成map文件 .
vue项目vue.config.js文件打包 配置、优化配置
HeXinT的博客
06-01 2818
vue项目优化、vue.config.js文件打包 配置、优化配置、vue配置，优化配置
vue项目vue.config.js配置打包压缩以及代码分离以及打包后dist文件夹添加时间戳实现更新后无缓存，自动压缩打包后dis文件夹并加上打包时间以及proxy代理
weixin_51406830的博客
03-15 3157
const moment = require('moment'); const TerserPlugin = require('terser-webpack-plugin') const FileManageerPlugin = require('filemanager-webpack-plugin'); const CompressionPlugin = require("compression-webpack-plugin"); module.exports = { configureWebpack
vue中引入高德地图
热门推荐
前端-尔嵘
12-31 2万+
总的来说，vue组件中使用高德地图的方式有两种，一种是vue-amap ：一套专门用于vue的高德地图插件；另外一种是原生的高德地图。 方式一、vue-amap： 官网API：直达车 (1)、安装依赖： npm install vue-amap -S 或者淘宝镜像： cnpm install vue-amap -save 亦或（CDN的方式获取最新版本的资源）： <sc......
vue2vue.config.js打包配置
最新发布
08-25
在 Vue 2 中，你可以通过 vue.config.js 文件来配置打包相关的配置。在根目录下创建一个名为 vue.config.js 的文件，并在其中导出一个对象来配置打包。 下面是一个示例的 vue.config.js 文件，其中包含了常用的打包配置选项： ```javascript module.exports = { publicPath: '/', // 设置打包后的静态文件路径，默认为 '/' outputDir: 'dist', // 设置打包输出的目录，默认为 'dist' assetsDir: 'static', // 设置静态资源目录 (js, css, img, fonts)，默认为 'static' productionSourceMap: false, // 是否在生产环境中生成 source map 文件，默认为 false // 配置 webpack 相关 configureWebpack: { // 自定义 webpack 配置 // 这里可以写入一些额外的 webpack 配置选项 }, // 配置开发服务器 devServer: { open: true, // 启动项目时自动打开浏览器，默认为 false port: 8080, // 开发服务器监听的端口，默认为 8080 proxy: { // 配置代理，用于解决跨域问题 '/api': { target: 'http://api.example.com', // 设置代理目标地址 changeOrigin: true, // 是否改变源地址 pathRewrite: { '^/api': '' // 将 /api 替换为空字符串 } } } } }; ``` 你可以根据项目的需求修改这些配置选项来满足你的要求。更多详细的配置选项可以参考 Vue CLI 官方文档：https://cli.vuejs.org/config/

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

尔嵘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值