首先我们需要在根目录里创建一个vue.config.js

首先在文件中先写入

//打包配置文件module.exports = {    assetsDir: 'static',     //  outputDir的静态资源(js、css、img、fonts)目录    publicPath: './',   // 静态资源路径(默认/,如果不改打包后会白屏)    productionSourceMap: false, //不输出map文件};

之后再使用CDN 加速优化(此代码在module.exports对象外面)

cdn加速可以去官网找到相应插件的路径 BootCDN官网

// 是否为生产环境const isProduction = process.env.NODE_ENV !== 'development';// 本地环境是否需要使用cdnconst devNeedCdn = false// cdn链接const cdn = {    // cdn:模块名称和模块作用域命名(对应window里面挂载的变量名称)    externals: {        'vue': 'Vue',        'vuex': 'Vuex',        'vue-router': 'VueRouter',        'axios': 'axios',        'element-ui': 'ELEMENT'  //这里需要注意下    },    // cdn的css链接    css: ['https://unpkg.com/element-ui/lib/theme-chalk/index.css'  //引入element ui  css文件    ],    // cdn的js链接    js: [        'https://cdn.bootcss.com/vue/2.6.11/vue.min.js',        'https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js',        'https://cdn.bootcss.com/axios/0.27.2/axios.min.js',        'https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.min.js'    ]}

在module.exports对象里写入

    chainWebpack: config => {        // ============注入cdn start============        config.plugin('html').tap(args => {            // 生产环境或本地需要cdn时,才注入cdn            if (isProduction || devNeedCdn) args[0].cdn = cdn            return args        })        // ============注入cdn start============    },

对图片文件进行压缩

下载依赖 这里如果用npm 可能会下载速度慢安装失败,建议使用cnpm

cnpm install image-webpack-loader --save-dev

之后继续在 chainWebpack里面新增以下代码

        config.plugins.delete('prefetch')        config.module.rule('images')            .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)            .use('image-webpack-loader')            .loader('image-webpack-loader')            .options({ bypassOnDebug: true })

对代码压缩

先下载依赖 也建议使用cnpm

cnpm install uglifyjs-webpack-plugin --save-dev

在module.exports对象里写入

 configureWebpack: config => {        if (isProduction || devNeedCdn) config.externals = cdn.externals        // 代码压缩        config.plugins.push(            new UglifyJsPlugin({                uglifyOptions: {                    //生产环境自动删除console                    compress: {                        drop_debugger: true,                        drop_console: true,                        pure_funcs: ['console.log']                    }                },                sourceMap: false,                parallel: true            })        )    },

对公共代码抽离

在configureWebpack里继续写入

        // 公共代码抽离        config.optimization = {            splitChunks: {                cacheGroups: {                    vendor: {                        chunks: 'all',                        test: /node_modules/,                        name: 'vendor',                        minChunks: 1,                        maxInitialRequests: 5,                        minSize: 0,                        priority: 100                    },                    common: {                        chunks: 'all',                        test: /[\\/]src[\\/]js[\\/]/,                        name: 'common',                        minChunks: 2,                        maxInitialRequests: 5,                        minSize: 0,                        priority: 60                    },                    styles: {                        name: 'styles',                        test: /\.(sa|sc|c)ss$/,                        chunks: 'all',                        enforce: true                    },                    runtimeChunk: {                        name: 'manifest'                    }                }            }        }

最后整合起来vue.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')// 是否为生产环境const isProduction = process.env.NODE_ENV !== 'development';// 本地环境是否需要使用cdnconst devNeedCdn = false// cdn链接const cdn = {    // cdn:模块名称和模块作用域命名(对应window里面挂载的变量名称)    externals: {        'vue': 'Vue',        'vuex': 'Vuex',        'vue-router': 'VueRouter',        'axios': 'axios'    },    // cdn的css链接    css: [    ],    // cdn的js链接    js: [        'https://cdn.bootcss.com/vue/2.6.11/vue.min.js',        'https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js',        'https://cdn.bootcss.com/axios/0.27.2/axios.min.js',        'https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.min.js'    ]}//打包配置文件module.exports = {    assetsDir: 'static',    publicPath: './',    productionSourceMap: false, //不输出map文件    chainWebpack: config => {        // ============注入cdn start============        config.plugin('html').tap(args => {            // 生产环境或本地需要cdn时,才注入cdn            if (isProduction || devNeedCdn) args[0].cdn = cdn            return args        })        // ============注入cdn start============        // 在chainWebpack中新增以下代码        config.plugins.delete('prefetch')        config.module.rule('images')            .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)            .use('image-webpack-loader')            .loader('image-webpack-loader')            .options({ bypassOnDebug: true })    },    configureWebpack: config => {        if (isProduction || devNeedCdn) config.externals = cdn.externals        // 代码压缩        config.plugins.push(            new UglifyJsPlugin({                uglifyOptions: {                    //生产环境自动删除console                    compress: {                        drop_debugger: true,                        drop_console: true,                        pure_funcs: ['console.log']                    }                },                sourceMap: false,                parallel: true            })        )        // 公共代码抽离        config.optimization = {            splitChunks: {                cacheGroups: {                    vendor: {                        chunks: 'all',                        test: /node_modules/,                        name: 'vendor',                        minChunks: 1,                        maxInitialRequests: 5,                        minSize: 0,                        priority: 100                    },                    common: {                        chunks: 'all',                        test: /[\\/]src[\\/]js[\\/]/,                        name: 'common',                        minChunks: 2,                        maxInitialRequests: 5,                        minSize: 0,                        priority: 60                    },                    styles: {                        name: 'styles',                        test: /\.(sa|sc|c)ss$/,                        chunks: 'all',                        enforce: true                    },                    runtimeChunk: {                        name: 'manifest'                    }                }            }        }    },    devServer: {        proxy: {            '/api': {                target: '线上接口地址',                ws: true,                changeOrigin: true,                pathRewrite: {                    '^/api': '/', // 根据之前vuejs的配置,用来拿掉URL上的(/api),但是暂时没有什么效果                },            },        },    },};

最后我的vue项目由原来的12M减少到2M,启动也是成功