feiniao-farm-h5/vue.config.js

/*
 * @Author: your name
 * @Date: 2020-10-14 15:24:16
 * @LastEditTime: 2022-01-20 11:38:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-element-sysu-map\vue.config.js
 */
const config = require("./src/config");
const webpack = require("webpack");
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
function resolve(dir) {
    return path.join(__dirname, '.', dir)
}
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
let scssVariables = require("./src/styles/variables.scss.js");

const Icons = require("unplugin-icons/webpack")
const IconsResolver = require("unplugin-icons/resolver")

module.exports = {
    publicPath: "",
    productionSourceMap: false,

    devServer: {
        setupMiddlewares: (middlewares, devServer) => {
            if (config.dev_mock) {
                const mock_server = require("./src/api/mock-server.js");
                mock_server(devServer.app);
            }
            return middlewares;
        },
        proxy: {
            '/ws': {
                target: 'https://apis.map.qq.com',
                changeOrigin: true,
                ws: false,
            }
        },
        //这里的ip和端口是前端项目的;下面为需要跨域访问后端项目
        host:"127.0.0.1",
        port: '8081',
        https: false,
        open: false // 配置自动启动浏览器
    },

    chainWebpack: (config) => {
        config.resolve.symlinks(true);

        config.plugin("provide").use(webpack.ProvidePlugin, [
            {
                XE: "xe-utils",
            },
        ]);

        config.plugin("define").use(webpack.DefinePlugin, [
            {
                VE_ENV: {
                    MODE: JSON.stringify(process.env.NODE_ENV),
                    SERVER: JSON.stringify(process.env.SERVER),
                    PYSERVER: JSON.stringify(process.env.PYSERVER)
                },
            },
        ]);
    },

    configureWebpack: (config) => {
        const cesiumSourcePath = 'node_modules/mars3d-cesium/Build/Cesium/' // cesium库安装目录
        const cesiumRunPath = './mars3d-cesium/' // cesium运行时路径
        const plugins = [
            // 标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到
            new webpack.DefinePlugin({
                CESIUM_BASE_URL: JSON.stringify(path.join(config.output.publicPath, cesiumRunPath))
            }),
            new webpack.DefinePlugin({
                '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': JSON.stringify(false)
            }),
            // Cesium相关资源目录需要拷贝到系统目录下面（部分CopyWebpackPlugin版本的语法可能没有patterns）
            new CopyWebpackPlugin({
                patterns: [
                    { from: 'node_modules/@liveqing/liveplayer-v3/dist/component/crossdomain.xml'},
                    { from: 'node_modules/@liveqing/liveplayer-v3/dist/component/liveplayer-lib.min.js', to: 'public/js'},
                    { from: 'node_modules/@liveqing/liveplayer-v3/dist/component/liveplayer.swf'},
                    { from: path.join(cesiumSourcePath, 'Workers'), to: path.join(config.output.path, cesiumRunPath, 'Workers') },
                    { from: path.join(cesiumSourcePath, 'Assets'), to: path.join(config.output.path, cesiumRunPath, 'Assets') },
                    { from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(config.output.path, cesiumRunPath, 'ThirdParty') },
                    { from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(config.output.path, cesiumRunPath, 'Widgets') }
                ],
            })
            ,
            Icons({ compiler: 'vue3' }),
            new NodePolyfillPlugin({})
        ]
        let baseConfig = {
            plugins: plugins,
            module: { unknownContextCritical: false }
        };
        let envConfig = {};
        if (process.env.NODE_ENV === "production") {
            // 为生产环境修改配置...
            envConfig = {
                optimization: {
                    splitChunks: {
                        chunks: "all",
                        // enforceSizeThreshold: 20000,
                        cacheGroups: {
                            echarts: {
                                name: "chunk-echarts",
                                priority: 20,
                                test: /[\\/]node_modules[\\/]_?echarts(.*)/,
                            },
                            elementPlus: {
                                name: "chunk-elementPlus",
                                priority: 20,
                                test: /[\\/]node_modules[\\/]_?element-plus(.*)/,
                            },
                            elementPlusIcon: {
                                name: "chunk-elementPlusIcon",
                                priority: 20,
                                test: /[\\/]node_modules[\\/]_?@element-plus[\\/]icons(.*)/,
                            },
                            mockjs: {
                                name: "chunk-mockjs",
                                priority: 20,
                                test: /[\\/]node_modules[\\/]_?mockjs(.*)/,
                            },
                        },
                    },
                },
                externals: {
                    // lodash: "_"
                },
                plugins: [
                    new TerserPlugin({
                        terserOptions: {
                            compress: {
                                drop_console: false,
                                drop_debugger: true,
                            },
                        },
                    }),
                    new CompressionWebpackPlugin({
                        filename: "[path][base].gz",
                        algorithm: "gzip",
                        // test: /\.js$|\.html$|\.json$|\.css/,
                        test: /\.js$|\.json$|\.css/,
                        threshold: 10240, // 只有大小大于该值的资源会被处理
                        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
                        // deleteOriginalAssets: true // 删除原文件
                    }),
                    Icons({ compiler: 'vue3' }),
                ],
            };
        }
        return Object.assign(baseConfig, envConfig);
    },

    css: {
        loaderOptions: {
            scss: {
                // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
                // additionalData: `@import "~@/styles/imports.scss";`
                additionalData: Object.keys(scssVariables)
                    .map((k) => `$${k.replace("_", "-")}: ${scssVariables[k]};`)
                    .join("\n"),
            },
        },
    },

};