lifeline_h5/vue.config.js

"use strict";
const path = require("path");

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

const name = "微纳园"; // page title

const ip = "0.0.0.0"; // dev port
const port = 9528; // dev port

const Webpack = require("webpack");
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
    // publicPath: '/mnpH5/', // 代理模式使用
    publicPath: "/lifelineH5/", // tomcat模式使用
    outputDir: "dist",
    assetsDir: "assets",
    lintOnSave: process.env.NODE_ENV === "development",
    productionSourceMap: false,
    devServer: {
        open: true,
        host: ip,
        port: port,
        https: false,
        disableHostCheck: true,
        // 以上的ip和端口是我们本机的;下面为需要跨域的
        proxy: {
            // 配置跨域
            "/h5Server": {
                target: `http://lifeline.idea-sf.com/lifelineApi`,
                ws: true,
                changOrigin: true, // 允许跨域
                pathRewrite: {
                    "^/h5Server": "" // 请求的时候使用这个server就可以
                }
            },
            "/server": {
                target: process.env.VUE_APP_API_URL,
                ws: true,
                changOrigin: true, // 允许跨域
                pathRewrite: {
                    "^/server": "" // 请求的时候使用这个server就可以
                }
            }
        }
    },
    configureWebpack: {
        // provide the app's title in webpack's name field, so that
        // it can be accessed in index.html to inject the correct title.
        name: name,
        resolve: {
            alias: {
                "@": resolve("src")
            }
        },
        externals: {
            vue: "Vue",
            "vue-router": "VueRouter",
            axios: "axios",
            vant: "vant",
            moment: "moment"
        },
        plugins: [
            // new BundleAnalyzerPlugin({ // 插件在这里使用
            //     analyzerHost: '127.0.0.1',
            //     //  将在“服务器”模式下使用的端口启动HTTP服务器。
            //     analyzerPort: 8889,
            //     analyzerMode: 'server',
            //     openAnalyzer: false
            // }),
            new Webpack.ProvidePlugin({
                $: "jquery",
                jquery: "jquery"
            }),
            new CompressionPlugin({
                // test: /\.(js|css)?$/i, // 哪些文件要压缩
                // filename: '[path].gz[query]', // 压缩后的文件名
                // algorithm: 'gzip', // 使用gzip压缩
                // minRatio: 1, // 压缩率小于1才会压缩
                // deleteOriginalAssets: true // 删除未压缩的文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false
                filename: "[path].gz[query]", // 压缩后的文件名(保持原文件名，后缀加.gz)
                algorithm: "gzip", // 使用gzip压缩
                test: new RegExp("\\.(" + ["js", "css"].join("|") + ")$"), // 匹配文件名
                threshold: 10240, // 对超过10k的数据压缩
                minRatio: 0.8 // 压缩率小于0.8才会压缩
            })
        ]
    },
    css: {
        loaderOptions: {
            // 给 sass-loader 传递选项
            sass: {
                // @/ 是 src/ 的别名
                data: `@import "@/common/style/index.scss";`
            }
        }
    }
};