vue-antd-admin後端管理系統的使用筆記

/vue.config.js 打包配置文件

assetsCDN cnd加載的配置，可以減少打包後文件的大小，但是cdn有時候加載需要很長時間，所以遺棄了

其中也配置了gz壓縮，文件大小壓縮後加載更快，同時也需要nginx開啓gz，nginx開啓如下

gzip  on;
gzip_disable “MSIE [1-6].(?!.*SV1)”;
gzip_http_version 1.1;
gzip_vary on;
gzip_proxied any;
gzip_min_length 5000;
gzip_buffers 16 8k;
gzip_comp_level 6;
gzip_types text/css text/xml text/plain text/javascript application/javascript application/json application/xml application/rss+xml application/xhtml+xml;

publicPath 配合route的base屬性來設置打包文件的公共路徑

具體代碼如下：

let path = require('path')
const webpack = require('webpack')
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const {getThemeColors, modifyVars} = require('./src/utils/themeUtil')
const {resolveCss} = require('./src/utils/theme-color-replacer-extend')
const CompressionWebpackPlugin = require('compression-webpack-plugin')

const productionGzipExtensions = ['js', 'css']
const isProd = process.env.NODE_ENV === 'production'

const assetsCDN = {
  // webpack build externals
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    nprogress: 'NProgress',
    clipboard: 'ClipboardJS',
    '@antv/data-set': 'DataSet',
    'js-cookie': 'Cookies'
  },
  css: [
  ],
  js: [
    '//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js',
    '//cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js',
    '//cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js',
    '//cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js',
    '//cdn.jsdelivr.net/npm/[email protected]/nprogress.min.js',
    '//cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js',
    '//cdn.jsdelivr.net/npm/@antv/[email protected]/build/data-set.min.js',
    '//cdn.jsdelivr.net/npm/[email protected]/src/js.cookie.min.js'
  ]
}

module.exports = {
  devServer: {
    // proxy: {
    //   '/api': { //此處要與 /services/api.js 中的 API_PROXY_PREFIX 值保持一致
    //     target: process.env.VUE_APP_API_BASE_URL,
    //     changeOrigin: true,
    //     pathRewrite: {
    //       '^/api': ''
    //     }
    //   }
    // }
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, "./src/theme/theme.less")],
    }
  },
  configureWebpack: config => {
    config.entry.app = ["babel-polyfill", "whatwg-fetch", "./src/main.js"];
    config.performance = {
      hints: false
    }
    config.plugins.push(
      new ThemeColorReplacer({
        fileName: 'css/theme-colors-[contenthash:8].css',
        matchColors: getThemeColors(),
        injectCss: true,
        resolveCss
      })
    )
    // Ignore all locale files of moment.js
    config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
    // 生產環境下將資源壓縮成gzip格式
    if (isProd) {
      // add `CompressionWebpack` plugin to webpack plugins
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }))
    }
    // if prod, add externals
    if (isProd && false) {
      config.externals = assetsCDN.externals
    }
  },
  chainWebpack: config => {
    // 生產環境下關閉css壓縮的 colormin 項，因爲此項優化與主題色替換功能衝突
    if (isProd) {
      config.plugin('optimize-css')
        .tap(args => {
            args[0].cssnanoOptions.preset[1].colormin = false
          return args
        })
    }
    // 生產環境下使用CDN
    if (isProd && false) {
      config.plugin('html')
        .tap(args => {
          args[0].cdn = assetsCDN
        return args
      })
    }
  },
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: modifyVars(),
          javascriptEnabled: true
        }
      }
    }
  },
  publicPath: process.env.VUE_APP_PUBLIC_PATH,
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false
}