vue.config.js配置

1. 打包上传oss
2. 引入svg
3. 混淆打包
4. vconsole
5. 配置全局less
6. gzip
7. chunk/prefetch

打包上传oss

1. 根目录oss.js

module.exports = {
  region: 'oss-cn-beijing', // 例如：oss-cn-beijing
  accessKeyId: '',
  accessKeySecret: '',
  bucket: ''
}

2. npm

    npm i webpack-aliyun-oss --save-dev

3. vue.config.js

const WebpackAliyunOss = require('webpack-aliyun-oss');
module.exports = {
    configureWebpack: () => {
        if (process.env.NODE_ENV === 'production') {
            return {
                plugins: [
                    new WebpackAliyunOss({
                        from: "./dist/**", // 上传那个文件或文件夹  可以是字符串或数组
                        // dist: "",  // 需要上传到oss上的给定文件目录
                        region: Oss.region,
                        accessKeyId: Oss.accessKeyId,
                        accessKeySecret: Oss.accessKeySecret,
                        bucket: Oss.bucket,
                        // test: true,
                        setOssPath: filePath => {
                            // some operations to filePath
                            let index = filePath.lastIndexOf("dist");
                            let Path = filePath.substring(index + 4, filePath.length);
                            return Path.replace(/\\/g, "/");
                        },
                        setHeaders: () => { // filePath
                            // some operations to filePath
                            // return false to use default header
                            return {
                                "Cache-Control": "max-age=31536000"
                            };
                        }
                    })
                ],
            }
        }
    }
}

引入svg

1. 定义path

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

2. vue.config.js

chainWebpack(config) {
        // set svg-sprite-loader
        // 设置 svg 导入
        config.module.rule('svg').exclude.add(resolve('src/icons')).end()
        config.module.rule('icons').test(/\.svg$/)
            .include.add(resolve('src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end()
    },

混淆打包

const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
    configureWebpack: () => {
        if (process.env.NODE_ENV === 'production') {
            return {
                optimization:{
                    minimizer:
                    [
                        new TerserPlugin({
                            terserOptions: {
                            mangle: true, // 混淆，默认也是开的，mangle也是可以配置很多选项的，具体看后面的链接
                            compress: {
                                drop_console: true,//传true就是干掉所有的console.*这些函数的调用.
                                drop_debugger: true, //干掉那些debugger;
                                pure_funcs: ['console.log'] // 如果你要干掉特定的函数比如console.info ，又想删掉后保留其参数中的副作用，那用pure_funcs来处理
                            }
                            }
                        })
                    ]
                }
            }
        }
    }
}

vconsole

// 这里 请用注释 的方式决定是否引入vconsole
import '@/assets/js/vConsole-3.3.4/dist/vconsole.min'
new window.VConsole()

webpack方式

const vConsolePlugin = require('vconsole-webpack-plugin')

module.exports = {
    configureWebpack: () => {
        if (process.env.NODE_ENV !== 'production') {
            return [
                new vConsolePlugin({
                    filter: [], // 需要过滤的入口文件
                    enable: true
                }),
            ]
        }
    }
}

全局less

1. npm

npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

2. vue.config.js

const path = require("path");
module.exports = {
    pluginOptions: {
        "style-resources-loader": {
            preProcessor: "less",
            patterns: [
                //这个是加上自己的路径，
                //注意：试过不能使用别名路径
                path.resolve(__dirname, "./src/assets/less/global.less")
            ]
        }
    }
}

gzip

1. npm

    npm i compression-webpack-plugin --save-dev

2. vue.config.js

module.exports = {
    configureWebpack: () => {
        if (process.env.NODE_ENV === 'production') {
            return {
                plugins: [
                    new CompressionPlugin({
                        test: /\.js$|\.html$|\.css/,
                        threshold: 10240,
                        deleteOriginalAssets: true
                    })
                ]
            }
        }
    }
}

chunk/prefetch

• webpackChunkName -> 相关模块用同一个chunkName

import(/* webpackChunkName: "webpackChunkName" */ 'name.vue')

• webpackPrefetch -> 首页

/* webpackChunkName: "webpackChunkName", webpackPrefetch: true */