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 = 9525 // 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://2.22.195.139:8781/apiForProd`,
                // 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";`
            }
        }
    }
}