vue/cli4.5项目打包

问题描述：

解决vue项目图片过大不显示问题 ； 解决vue cli4~项目打包问题 ； 此项目所用版本vue/cli 4.5.11； vue/cli 4.5.11打包； 项目打包步骤如下：

---

解决方案：

项目根目录创建vue.config.js文件

module.exports = {
    
    
    publicPath: "./", // 公共路径(必须有的)
    outputDir: "dist", // 输出文件目录
    assetsDir: "static", //静态资源文件名称
    lintOnSave: false,
    productionSourceMap: false, //去除打包后js的map文件
    devServer: {
    
     //启动项目在8080端口自动打开
        open: true,
        port: 8080,
        proxy: null
    },
    //去掉console
    configureWebpack: (config) => {
    
    
        // 判断为生产模式下，因为开发模式我们是想保存console的
        if (process.env.NODE_ENV === "production") {
    
    
            config.optimization.minimizer.map((arg) => {
    
    
                const option = arg.options.terserOptions.compress;
                option.drop_console = true; // 打开开关
                return arg;
            });
        }
    },
    configureWebpack: {
    
    
        // 关闭 webpack 的性能提示
        // performance: {
    
    
        //   hints:false
        // }

        // //或者

        // 警告 webpack 的性能提示
        performance: {
    
    
            hints: 'warning',
            // 入口起点的最大体积
            maxEntrypointSize: 50000000,
            // 生成文件的最大体积
            maxAssetSize: 30000000,
            // 只给出 js 文件的性能提示
            assetFilter: function (assetFilename) {
    
    
                return assetFilename.endsWith('.js')
            }
        }
    }
};

npm run build