simulation-front/vue.config.js

'use strict'
const webpack = require('webpack');
const path = require('path')
const resolve = dir => path.resolve(__dirname, dir)
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
// 打包分析
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;


module.exports = {
    transpileDependencies: ['webpack-dev-server/client'],
    // 部署应用时的基本 URL
    publicPath: '/',
    // 输出文件目录
    outputDir: 'dist',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: false,
    assetsDir: '', // 相对于outputDir的静态资源(js、css、img、fonts)目录
    //是否使用包含运行时编译器的 Vue 构建版本
    runtimeCompiler: true,
    // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
    productionSourceMap: false,
    chainWebpack: config => {
        config
            .entry(['./src/main'])
            .add('babel-polyfill');
        config.resolve.symlinks(true); // 修复热更新失效
        // 添加别名
        config.resolve.alias
            .set('@', resolve('src'))
        // .set('assets', resolve('src/assets'))
        // .set('components', resolve('src/components'));
        // 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
        config.plugin('html').tap(args => {
            //修复 Lazy loading routes Error
            args[0].chunksSortMode = 'none';
            return args;
        })
        //压缩图片
        // config.module
        //     .rule("images")
        //     .use("image-webpack-loader")
        //     .loader("image-webpack-loader")
        //     .options({
        //         bypassOnDebug: true
        //     })
        //     .end()
        // 打包分析, 打包之后自动生成一个名叫report.html文件(可忽视)  查看打包数据使用
        if (IS_PROD) {
            config.plugin("webpack-report").use(BundleAnalyzerPlugin, [{
                analyzerMode: "static"
            }]);
        }
    },
    css: {
        // extract: true, //解决css热更新失败问题
        sourceMap: false,
        modules: false,
        loaderOptions: {
            less: {
                javascriptEnabled: true,
            }
        }
    },
    //需要npm install style-resources-loader ; 然后执行 vue add style-resources-loader 选择预编译less
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: ['src/assets/common/css/theme.less']
        }
    },
    devServer: { //跨域
        port: "8002", //端口号
        open: true, //配置自动启动浏览器
        hot: true,
        proxy: { // 配置跨域处理 可以设置多个
            '/simulation/oauth': {
                target: 'http://60.205.245.110:7001', // online-new
                changeOrigin: true,
                secure: false, // 如果是https接口，需要配置这个参数
                pathRewrite: {
                    '^/simulation/oauth': '/simulation/oauth'
                }
            },
            '/simulation/resource/common': {
                target: 'http://60.205.245.110:8001', // online-new
                changeOrigin: true,
                secure: false, // 如果是https接口，需要配置这个参数
                pathRewrite: {
                    '^/simulation/resource/common': '/simulation/resource/common'
                }
            },
            '/simulation/resource/server': {
                target: 'http://60.205.245.110:8005', // online-new
                changeOrigin: true,
                secure: false, // 如果是https接口，需要配置这个参数
                pathRewrite: {
                    '^/simulation/resource/server': '/simulation/resource/server'
                }
            },
            '/simulation/resource/video': {
                target: 'http://60.205.245.110:8007', // online-new
                changeOrigin: true,
                secure: false, // 如果是https接口，需要配置这个参数
                pathRewrite: {
                    '^/simulation/resource/server': '/simulation/resource/server'
                }
            },
        }
    },
    configureWebpack: config => {
        const plugins = [];
        plugins.push(
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery",
                'window.Quill': 'quill/dist/quill.js',
                'Quill': 'quill/dist/quill.js'
            })
        )
        if (IS_PROD) {
            //开启 gzip 压缩
            plugins.push(
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: productionGzipExtensions,
                    threshold: 10240,
                    minRatio: 0.8
                })
            );
        }
        config.plugins = [
            ...config.plugins,
            ...plugins
        ];
    },
}