安装：
npm install uglifyjs-webpack-plugin --save
创建vue.config.js
// 引入uglifyjs-webpack-pluginconst UglifyPlugin = require('uglifyjs-webpack-plugin')module.exports = {configureWebpack: (config) => {let optimization = {minimizer: [new UglifyPlugin({// 删除consoleuglifyOptions: {parallel: true,warnings: false,compress: {drop_console: false, //是否清除所有consoledrop_debugger: true,//是否清除debuggerpure_funcs: ['console.log','console.info','console.warn','console.debug'] //drop_console 设置false,需要特殊清除的}}})]}Object.assign(config, {optimization})}}
特殊判断（生产环境使用）：
1.项目目录创建
.env.dev 文件
NODE_ENV = 'development'VUE_APP_TITLE = 'development'
.env.prod 文件
NODE_ENV='production'VUE_APP_TITLE='prod'
2.使用：
安装 npm installprocess --save
package.json 配置修改，加载配置文件
"scripts": {"serve": "vue-cli-service serve --mode dev", //加载.env.dev 配置文件"build": "vue-cli-service build --mode prod", //加载.env.prod配置文件},
process.env.NODE_ENV 可以获取项目的配置的环境
3. 生产环境清除console
// 引入uglifyjs-webpack-pluginconst UglifyPlugin = require('uglifyjs-webpack-plugin')module.exports = {configureWebpack: (config) => {if (process.env.NODE_ENV == 'production') {// 为生产环境修改配置config.mode = 'production'// 将每个依赖包打包成单独的js文件let optimization = {minimizer: [new UglifyPlugin({// 删除consoleuglifyOptions: {parallel: true,warnings: false,compress: {drop_console: false, //是否清除所有consoledrop_debugger: true,//是否清除debuggerpure_funcs: ['console.log','console.info','console.warn','console.debug'] //drop_console 设置false,需要特殊清除的}}})]}Object.assign(config, {optimization})} else {// 为开发环境修改配置config.mode = 'development'}}}
uglifyjs-webpack-plugin->
vue 解决每次发版后要清理浏览器缓存（css,js加版本号）
1.安装standard-version
npm install standard-version --save--dev
2.package.json 配置：scripts加
"scripts": {"release": "standard-version --no-verify --release-as patch && git push --follow-tags", //小版本"release:minor": "standard-version --no-verify --release-as minor && git push --follow-tags", //中版本"release:major": "standard-version --no-verify --release-as major && git push --follow-tags", //大版本},
3.vue.config.js配置
// 版本号const config = require('./package.json');let version = config.version.replace('.','').replace('.','');module.exports = {configureWebpack: (config) => {// 打包后js文件名称添加时间戳config.output.filename = `js/[name].${version}.js`;config.output.chunkFilename = `js/[name].${version}.js`;// config.output.chunkFilename = `js/chunk.[id].${version}.js`;},css: { // chunkFilename: `css/chunk.[id].${version}.css`,extract: { // 打包后css文件名称添加时间戳filename: `css/[name].${version}.css`,chunkFilename: `css/[name].${version}.css`,}}}
4.使用：
1).打包之前先运行 npm runrelease 或其他两个，自动增加版本号
2).运行打包
OTHER:(standard-version和commitizen混合配置可以实现动化 项目版本控制)
package.json 配置后的关键：
{"name": "","version": "","description": "","scripts": {"commit": "git add . && git cz","release": "standard-version -- --release as patch && git push --follow-tags","release:minor": "standard-version -- --release as minor && git push --follow-tags","release:major": "standard-version -- --release as major && git push --follow-tags"},"devDependencies": {"commitizen": "^4.2.4","cz-conventional-changelog": "^3.2.0","standard-version": "^9.3.1"},"config": {"commitizen": {"path": "./node_modules/cz-conventional-changelog"}}}
可以参考其他同行的配置
