vue-cli 3

https://www.jianshu.com/p/ce6f7264967a
https://www.jianshu.com/p/d50e543223b8
https://www.jianshu.com/p/6b9f56145df2

vue.config.js

/** 
 * 插件(webpack): uglifyjs-webpack-plugin
 * 插件(webpack): vconsole-webpack-plugin
 * 插件(webpack): postcss-px2rem
 */

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const VConsolePlugin = require('vconsole-webpack-plugin')

module.exports = {
    // publicPath: "/",
    outputDir: "./bin",
    assetsDir: "",
    indexPath: "index.html", // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
    filenameHashing: true, // 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希
    productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
    devServer: {
        port: 9999,
    },
    chainWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config
                .plugin('uglify')
                .use(UglifyJsPlugin, [{
                    sourceMap: true,
                    uglifyOptions: {
                        compress: {
                            warnings: false,
                            drop_console: true, //console
                            drop_debugger: false,
                            pure_funcs: ['console.log'] //移除console
                        },
                        /* mangle: {
                            safari10: true
                        } */
                    }
                }])

        } else {
            config
                .plugin('vconsole')
                .use(VConsolePlugin, [{ enable: true }])
        }
    },
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-px2rem')({ remUnit: 100 }), // 换算的基数
                ]
            }
        }
    },
}

babel.config.js

/** 
 * UI框架 mint-ui
 * 插件(webpack): babel-plugin-component
 */
module.exports = {
    presets: [
        '@vue/app'
    ],
    plugins: [
        ["component",
            {
                "libraryName": "mint-ui",
                "style": true
            }
        ]
    ]
};