1. Toy模板网首页
  2. > Toy博客

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

7月前 作者：尔嵘 分类：Toy博客 阅读(35) 违法举报

这篇具有很好参考价值的文章主要介绍了vue.config.js中打包相关配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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打包优化。文章来源地址https://www.toymoban.com/news/detail-815066.html

到了这里，关于vue.config.js中打包相关配置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • vue前端开发中，通过vue.config.js配置和nginx配置，实现多个入口文件的实现方法

    由于vue为单页面项目，通过控制组件局部渲染，main.js是整个项目唯一的入口，整个项目都在一个index.html外壳中。 若项目过大，会造成单页面负载过重；同时，多页面利于模块独立部署。 如果项目中不同的页面需要不同的main.js和App.vue这样就需要配置多个入口了。 要单独将页

    2024年01月22日
    浏览(77)

  • vue2.x项目没有vue.config.js时，web worker使用

    vue：2.7.14，webpack 3.6.0构建项目 在vue中使用new Worker(‘./worker.js’)原生方法，引入woker.js子线程时，无法正常读取引入。于是乎就百度了一下，网上vue使用web worker的步骤。 1.安装使用 worker-loader // 安装依赖包 npm install worker-loader -D 2.vue.config.js 完整配置 module.exports = { chainWebpac

    2024年02月06日
    浏览(51)

  • 已配置vue.config.js中的proxy代理，前端本地环境仍然请求后端出现跨域报错

    已配置vue.config.js中的proxy代理，前端本地环境仍然请求后端出现跨域报错 已配置vue.config.js中的proxy代理，前端本地环境仍然请求后端出现跨域报错 控制台仍然出现cors禁止报错，接口调不通 配置proxy代理解决跨域问题的原理是： 前端工程本地环境会启动一个 express 或 koa 的

    2024年02月01日
    浏览(46)
  • vue项目的vue.config.js在打包过程中，并不会处理api请求。

    vue项目的vue.config.js在打包过程中，并不会处理api请求。

    主要处理打包选项和静态资源文件 请求是axios处理的  

    2024年02月16日
    浏览(35)
  • 关于前端框架vue2升级为vue3的相关说明

    关于前端框架vue2升级为vue3的相关说明

    一些框架需要升级 当前（202306） Vue 的最新稳定版本是 v3.3.4 。Vue 框架升级为最新的3.0版本，涉及的相关依赖变更有： 前提条件：已安装 16.0 或更高版本的Node.js（摘） 必须的变更：核心库vue@23、路由vue-router@34、状态管理vuex@34 构建工具链: Vue CLI Vite（摘） 状态管理: Vuex Pi

    2024年02月15日
    浏览(40)

  • 解读vue配置文件（vue.config.js）

    这是一个Vue.js的配置文件，用于指定项目的构建和开发服务器的行为。让我们逐步解读： resolve 函数： 用于解析路径。它被定义为简化创建目录的绝对路径的过程。 name 和 port 常量： name 设置为来自设置文件的标题。 port 设置为 8013 ，表示开发服务器的端口号。 publicPath ：

    2024年01月17日
    浏览(31)

  • 【Vue】vue.config.js 的完整配置

    之前，我有提到过，当然大家肯定也都知道，Vue3.0不在有webpack.config.js的配置；但是不可避免,在项目开发中我们肯定会存在一些特殊的需求需要调整webpack, 这个时候，在Vue3.0的项目当中，我们就需要在根目录创建vue.config.js去完成webpack的一些特殊配置,默认它会被 @vue/cli-servi

    2023年04月22日
    浏览(33)
  • 前端（四）——vue.js、vue、vue2、vue3

    前端（四）——vue.js、vue、vue2、vue3

    😊博主：小猫娃来啦 😊文章核心： vue.js、vue、vue2、vue3从全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue：Vue.js的第一个版本，也称为Vue 1.x。它于2014年首次发布，并获得了广泛的应用和认可。 Vue2：Vue.js的第二个版本，也称为Vue 2.x。它在Vu

    2024年02月12日
    浏览(41)

  • vue.config.js配置详解

    vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。 以下是 vue.config.js 的一个基本配置： 这里只是列出

    2024年02月15日
    浏览(38)
  • vue2使用electron以及打包配置

    vue2使用electron以及打包配置

    1.创建项目 2.安装electron 会自动安装相关依赖 安装成功后会在src下自动生成一个background.js文件就是相应的electron的配置信息 以及package.json中的scripts中也会多出了几种运行或打包的命令 运行项目： 此时运行项目没有报错但是启的很慢 将background.js中的这段代码注释掉就可解决

    2024年01月17日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包