Vue 那些事

Vue Cli 环境变量和模式

通过传递 --mode 选项参数为命令行覆写默认模式。例如，如果你想要在构建命令中使用开发环境变量，请在你的 package.json 脚本中加入：

"dev-build": "vue-cli-service build --mode development",

配置文件vue.config.js

'use strict'
const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
const FileManagerPlugin = require('filemanager-webpack-plugin')

process.env.VUE_APP_VERSION = require('./package.json').version

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

module.exports = {
    outputDir: process.env.VUE_APP_OUTPUT_DIR,
    configureWebpack: config=>{
        config.optimization.splitChunks = {
            cacheGroups: {
                aliOss: {
                    name: 'ali-oss',
                    test: /[\/]node_modules[\/]ali-oss/,
                    priority: -8,
                    chunks: 'initial'
                },
                elementUi: {
                    name: 'element-ui',
                    test: /[\/]node_modules[\/]element-ui/,
                    priority: -9,
                    chunks: 'initial'
                },
                vendors: {
                    name: 'chunk-vendors',
                    test: /[\/]node_modules[\/]/,
                    priority: -10,
                    chunks: 'initial'
                },
                common: {
                    name: 'chunk-common',
                    minChunks: 2,
                    priority: -20,
                    chunks: 'initial',
                    reuseExistingChunk: true
                }
            }
        }
    },
    chainWebpack: config => {
        // 解决ie11兼容ES6
        // config.entry('main').add('babel-polyfill')
        // 开启图片压缩
        config.module.rule('images')
            .test(/.(png|jpe?g|gif|svg)(?.*)?$/)
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({bypassOnDebug: true})

        // 开启js、css压缩
        if (process.env.NODE_ENV === 'production') {
            config.plugin('compressionPlugin')
                .use(new CompressionPlugin({
                    test: /.js$|.html$|.\css/, // 匹配文件名
                    threshold: 10240, // 对超过10k的数据压缩
                    deleteOriginalAssets: false // 不删除源文件
                }))
            config.plugin('fileManagerPlugin')
                .use(new FileManagerPlugin({  //初始化 filemanager-webpack-plugin 插件实例
                    onEnd: {
                        delete: [   //首先需要删除项目根目录下的dist.zip
                            `./dist/dist_v${process.env.VUE_APP_VERSION}.zip`,
                            './dist/dist.zip',
                        ],
                        archive: [ //然后我们选择dist文件夹将之打包成dist.zip并放在根目录
                            {source: './dist', destination: `./dist/dist_v${process.env.VUE_APP_VERSION}.zip`},
                            {source: './dist', destination: './dist/dist.zip'},
                        ]
                    }
                }))
        }
        // 开启js、css压缩
        if (process.env.VUE_APP_ENV === 'yst-production') {
            config.plugin('compressionPlugin')
                .use(new CompressionPlugin({
                    test: /.js$|.html$|.\css/, // 匹配文件名
                    threshold: 10240, // 对超过10k的数据压缩
                    deleteOriginalAssets: false // 不删除源文件
                }))
            config.plugin('fileManagerPlugin')
                .use(new FileManagerPlugin({  //初始化 filemanager-webpack-plugin 插件实例
                    onEnd: {
                        delete: [   //首先需要删除项目根目录下的dist.zip
                            './dist-yst/dist.zip',
                        ],
                        archive: [ //然后我们选择dist文件夹将之打包成dist.zip并放在根目录
                            {source: './dist-yst', destination: './dist-yst/dist.zip'},
                        ]
                    }
                }))
        }
    },
    devServer: {
        host: '0.0.0.0',
        port: 9111
    },
    productionSourceMap: false
}