vue-cli4打包（vue.config.js）自定义复制哪些文件到打包后的文件夹中

ゞ浴缸里的玫瑰 2024-03-17 10:17 25阅读 0赞

我维护的一个多入口多出口的项目，每个出口文件夹中的html都有同级的config.js文件，其中记录一些配置信息，可以如下配置vue.config.js，为每一个html输出指定config.js

// @vue/cli配置文档https://cli.vuejs.org/zh/config/#vue-config-js
    module.exports = {
        
            ...
            // webpack-plugin-copy
            config.plugin("copy").tap(() => {
        
                const arr = [[]];
                const copy = [
                    {
         key: "page1", dir: "page1" },
                    {
         key: "page2", dir: "page2" },
                ];
                for (let i of copy) {
        
                    arr[0].push({
        
                        from: "public/config-plugin.js",
                        to: i.dir + "/config.js",
                        transform(content) {
        
                            // 在此处自定义 config-plugin.js 的内容
                            const modifiedContent = content
                                .toString()
                                .replace(/CUSTOM_VALUE/g, i.key);
                            return modifiedContent;
                        },
                    });
                    // 复制public文件夹下面的loading文件夹到各自页面文件下
                    arr[0].push({
        
                        from: "public/loading",
                        to: i.dir + "/loading",
                    });
                }
                // 复制public文件夹下面的favicon.ico到dist/favicon.ico
                arr[0].push({
        
                    from: "public/favicon.ico",
                    to: "favicon.ico",
                });
                return arr;
            });
        },
        pages: {
        
            // 大屏控制版本适配10560
            ddScreenControl: {
        
                entry: "src/main.js",
                template: "public/index.html",
                filename: "ddScreenControl/index.html",
            },
            // 大屏控制版本
            ddScreenControl9800: {
        
                entry: "src/main.js",
                template: "public/index.html",
                filename: "ddScreenControl9800/index.html",
            },
        },
    };