ts-program/vue.config.js

/*
 * Copyright (c) 2019.
 * author: wally
 * email: 18603454788@163.com
 */
const path = require('path');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg|ttf|woff|woff2)(\?.*)?$/i;
const CompressionWebpackPlugin = require('compression-webpack-plugin');

const resolve = dir => path.join(__dirname, dir);
const isPro = process.env.VUE_APP_NODE_ENV === 'production';
const publicPath = process.env.VUE_APP_PUBLIC_PATH;
const proxyUrl = process.env.VUE_APP_PROXY_URL;
const apiUrl = process.env.VUE_APP_API_URL;
const title = process.env.VUE_APP_TITLE;
// console.log('proxyUrl: ', proxyUrl);
// console.log('apiUrl: ', apiUrl);

// 本地环境是否需要使用cdn
const devNeedCdn = true;

// cdn 链接及配置
const cdn = {
  css: [
    'https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css',
    'https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.6.5/antd.min.css',
  ],
  js: [
    isPro ? 'https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js' : 'https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js',
    'https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js',
    'https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js',
    'https://cdn.bootcdn.net/ajax/libs/moment.js/2.9.0/moment.min.js',
    'https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js',
    'https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js',
    'https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.6.5/antd.min.js',
  ],
  // externals: {
  //   vue: 'Vue',
  //   vuex: 'Vuex',
  //   'vue-router': 'VueRouter',
  //   moment: 'moment',
  //   axios: 'axios',
  //   'ant-design-vue': 'antd',
  //   lodash: '_',
  // },
};

module.exports = {
  lintOnSave: true,
  publicPath: isPro ? publicPath : '/',
  devServer: {
    hot: true,
    open: true,
    overlay: {
      warnings: false,
      errors: true,
    },
    proxy: {
      [proxyUrl]: {
        target: apiUrl, // 代理接口
        changeOrigin: true,
        pathRewrite: { [`^${proxyUrl}`]: '' },
      },
    },
  },
  productionSourceMap: false, // 去掉生产环境的sourcemap 加快构建速度

  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: title,
    resolve: {
      alias: {
        '~': __dirname,
        '@': resolve('src'),
        assets: resolve('src/assets'),
        views: resolve('src/views'),
        components: resolve('src/components'),
        common: resolve('src/common'),
        config: resolve('src/config'),
        router: resolve('src/router'),
        store: resolve('src/store'),
        util: resolve('src/util'),
        request: resolve('src/request'),
      },
    },
    plugins: isPro
      ? [
          new CompressionWebpackPlugin({
            test: productionGzipExtensions,
            threshold: 10240,
            deleteOriginalAssets: false,
          }),
        ]
      : [],
    externals: isPro || devNeedCdn ? cdn.externals : {},
  },

  chainWebpack(config) {
    if (isPro) {
      config.optimization
        .runtimeChunk('single')
        .minimize(true)
        .splitChunks({
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 20000, // 依赖包超过20000bit将被单独打包
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
                // get the name. E.g. node_modules/packageName/not/this/part.js
                // or node_modules/packageName
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                // npm package names are URL-safe, but some servers don't like @ symbols
                return `npm.${packageName.replace('@', '')}`;
              },
            },
          },
        });
    }

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