vue.config.js

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js'];

module.exports = {
  configureWebpack: config => {
    config.resolve.alias = {
      '@components': path.resolve(__dirname, 'src/components/index.ts'),
      '@views': path.resolve(__dirname, 'src/views'),
      '@src': path.resolve(__dirname, 'src'),
      '@icons': path.resolve(__dirname, 'src/assets/icons'),
      '@images': path.resolve(__dirname, 'src/assets/images'),
      '@constructors': path.resolve(__dirname, 'src/constructors/index.ts'),
      '@services': path.resolve(__dirname, 'src/services/index.ts'),
      '@fonts': path.resolve(__dirname, 'src/assets/fonts'),
      '@graphql': path.resolve(__dirname, 'src/graphql/index.ts'),
      '@utils': path.resolve(__dirname, 'src/utils/index.ts'),
      '@css': path.resolve(__dirname, 'src/styles/root.scss'),
      '@router': path.resolve(__dirname, 'src/router/index.ts'),
      '@validators': path.resolve(__dirname, 'src/utils/validators.ts'),
      '@methods': path.resolve(__dirname, 'src/utils/methods.ts'),
      '@filters': path.resolve(__dirname, 'src/utils/filters.ts'),
      '@paths': path.resolve(__dirname, 'src/services/Api/ApiRoutes.ts'),
      '@models': path.resolve(__dirname, 'src/models/index.ts'),
      '@store': path.resolve(__dirname, 'src/store/index.ts'),
      '@modules': path.resolve(__dirname, 'src/store/Modules/index.ts'),
    };
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer = [
        new UglifyJsPlugin({
          cache: true,
          parallel: true,
          uglifyOptions: {
            ie8: false,
            ecma: 5,
            mangle: true,
            output: {
              comments: false,
              beautify: false,
            },
            compress: { drop_console: true },
            warnings: false,
            keep_fnames: true,
          },
        }),
      ];
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8,
        })
      );
    }
  },
  css: {
    loaderOptions: {
      sass: {
        outputStyle: 'expanded',
        sourceMap: true,
        sourceMapContents: true,
        data: `
          @import "src/styles/colors.scss";
          @import "src/styles/variables.scss";
          @import "src/styles/mixins.scss";
        `,
        esModule: true,
      },
    },
  },

  devServer: {
    port: 5004,
    historyApiFallback: true,
    disableHostCheck: true,
    host: '0.0.0.0',
    open: true,
  },
};