official-cloudpure/lonyue-web/vue.config.js

const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin')

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

const name = '云璞信息'
const port = process.env.port || process.env.npm_config_port || 8080

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
    outputDir: 'dist',
    assetsDir: 'static',
    parallel: false,
    lintOnSave: process.env.NODE_ENV === 'development',
    productionSourceMap: false,

    devServer: {
        port: port,
        open: true,
        host: '0.0.0.0',
        // proxy: {
        //   '/api': {
        //     target: process.env.VUE_APP_BASE_API || 'http://localhost:3000',
        //     changeOrigin: true,
        //     pathRewrite: {
        //       '^/api': ''
        //     }
        //   }
        // },
        disableHostCheck: true
    },

    css: {
        loaderOptions: {
            scss: {
                additionalData: `@import "@/assets/styles/variables.scss";`
            },
            // postcss: {
            //   plugins: [
            //     require('postcss-pxtorem')({
            //       rootValue: 200, // 基于375px设计稿
            //       propList: ['*'],
            //       selectorBlackList: ['.no-rem'], // 不转换rem的类名
            //       minPixelValue: 2
            //     })
            //   ]
            // }
        }
    },

    configureWebpack: (config) => {
        config.name = name
        config.resolve.alias = {
            ...config.resolve.alias,
            '@': resolve('src')
        }

        if (process.env.NODE_ENV === 'production') {
            config.plugins.push(
                new CompressionPlugin({
                    test: /\.(js|css|html|svg)?$/i,
                    filename: '[path][base].gz',
                    algorithm: 'gzip',
                    minRatio: 0.8,
                    deleteOriginalAssets: false
                })
            )
        }
    },

    chainWebpack(config) {
        // 预加载
        config.plugins.delete('preload')
        config.plugins.delete('prefetch')

        // set svg-sprite-loader
        config.module
            .rule('svg')
            .exclude.add(resolve('src/assets/icons'))
            .end()

        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/assets/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })

        // 图片压缩
        config.module
            .rule('images')
            .use('url-loader')
            .loader('url-loader')
            .tap(options => Object.assign(options, {
                limit: 10240
            }))

        // 生产环境配置
        config.when(process.env.NODE_ENV === 'production', config => {
            config.optimization.splitChunks({
                chunks: 'all',
                cacheGroups: {
                    libs: {
                        name: 'chunk-libs',
                        test: /[\\/]node_modules[\\/]/,
                        priority: 10,
                        chunks: 'initial'
                    },
                    vant: {
                        name: 'chunk-vant',
                        test: /[\\/]node_modules[\\/]_?vant(.*)/,
                        priority: 20
                    },
                    commons: {
                        name: 'chunk-commons',
                        test: resolve('src/components'),
                        minChunks: 3,
                        priority: 5,
                        reuseExistingChunk: true
                    }
                }
            })
            config.optimization.runtimeChunk('single')
        })
    }
}