vue 关闭log_一份关于vue-cli3项目常用项配置

作者：羊先生

转发链接：https://segmentfault.com/a/1190000022512358

前言

配置全局cdn，包含js、css开启Gzip压缩，包含文件js、css去掉注释、去掉console.log压缩图片本地代理设置别名，vscode也能识别配置环境变量开发模式、测试模式、生产模式请求路由动态添加axios配置添加mock数据配置全局less只打包改变的文件开启分析打包日志

vue.config.js

完整的架构配置

const path = require('path');const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 去掉注释const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 开启压缩const { HashedModuleIdsPlugin } = require('webpack');function resolve(dir) {    return path.join(__dirname, dir)}const isProduction = process.env.NODE_ENV === 'production';// cdn预加载使用const externals = {    'vue': 'Vue',    'vue-router': 'VueRouter',    'vuex': 'Vuex',    'axios': 'axios',    "element-ui": "ELEMENT"}const cdn = {    // 开发环境    dev: {        css: [            'https://unpkg.com/element-ui/lib/theme-chalk/index.css'        ],        js: []    },    // 生产环境    build: {        css: [            'https://unpkg.com/element-ui/lib/theme-chalk/index.css'        ],        js: [            'https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js',            'https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js',            'https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js',            'https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js',            'https://unpkg.com/element-ui/lib/index.js'        ]    }}module.exports = {    lintOnSave: false, // 关闭eslint    productionSourceMap: false,    publicPath: './',     outputDir: process.env.outputDir, // 生成文件的目录名称    chainWebpack: config => {        config.resolve.alias            .set('@', resolve('src'))        // 压缩图片        config.module            .rule('images')            .test(/.(png|jpe?g|gif|svg)(?.*)?$/)            .use('image-webpack-loader')            .loader('image-webpack-loader')            .options({ bypassOnDebug: true })        // webpack 会默认给commonChunk打进chunk-vendors，所以需要对webpack的配置进行delete        config.optimization.delete('splitChunks')        config.plugin('html').tap(args => {            if (process.env.NODE_ENV === 'production') {                args[0].cdn = cdn.build            }            if (process.env.NODE_ENV === 'development') {                args[0].cdn = cdn.dev            }            return args        })                config            .plugin('webpack-bundle-analyzer')            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)    },    configureWebpack: config => {        const plugins = [];        if (isProduction) {            plugins.push(                new UglifyJsPlugin({                    uglifyOptions: {                        output: {                            comments: false, // 去掉注释                        },                        warnings: false,                        compress: {                            drop_console: true,                            drop_debugger: false,                            pure_funcs: ['console.log']//移除console                        }                    }                })            )            // 服务器也要相应开启gzip            plugins.push(                new CompressionWebpackPlugin({                    algorithm: 'gzip',                    test: /.(js|css)$/,// 匹配文件名                    threshold: 10000, // 对超过10k的数据压缩                    deleteOriginalAssets: false, // 不删除源文件                    minRatio: 0.8 // 压缩比                })            )            // 用于根据模块的相对路径生成 hash 作为模块 id, 一般用于生产环境            plugins.push(                new HashedModuleIdsPlugin()            )            // 开启分离js            config.optimization = {                runtimeChunk: 'single',                splitChunks: {                    chunks: 'all',                    maxInitialRequests: Infinity,                    minSize: 1000 * 60,                    cacheGroups: {                        vend