vue config

vue.config.js

const path = require('path')
const ImageminPlugin = require('imagemin-webpack-plugin').default
function resolve (dir) {
  return path.join(__dirname, dir)
}
let externals = {}
let plugins = []
if (process.env.NODE_ENV === 'production') {
  // 外部有引入cdn的話
  externals = {
    // vue: 'Vue',
    // 'vue-router': 'VueRouter',
    // axios: 'axios'
    // 'vue-i18n': 'VueI18n',
    // d3: 'd3'
  }
  plugins = [
    // 圖片壓縮
    new ImageminPlugin({
      disable: process.env.NODE_ENV !== 'production', // Disable during development
      pngquant: {
        quality: '95-100'
      }
    })
  ]
}
module.exports = {
  pluginOptions: {
    i18n: {
      locale: 'zh-cn',
      fallbackLocale: 'zh-cn',
      localeDir: 'locales',
      enableInSFC: true
    }
  },
  css: {
    loaderOptions: {
      // stylus alias 路徑配置
      stylus: {
        preferPathResolver: 'webpack'
      }
    }
  },

  chainWebpack: config => {
    // 開發中和實際production的index.html切開
    config.plugin('html').tap(args => {
      args[0].template = resolve(
        process.env.NODE_ENV === 'production'
          ? 'public/index.html'
          : 'public/index.dev.html'
      )
      return args
    })
    // 引入json5
    config.module
      .rule('json5')
      .test(/\.json5$/)
      .use('json5-loader')
      .loader('json5-loader')
      .end()
    config.module
      .rule('i18n')
      .resourceQuery(/blockType=i18n/)
      .use('i18n')
      .loader('@kazupon/vue-i18n-loader')
      .end()
      .use('json5-loader')
      .loader('json5-loader')
      .end()
    // 設定自定義路徑
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('layout', resolve('src/layout'))
      .set('base', resolve('src/base'))
      .set('static', resolve('src/static'))
  },

  configureWebpack: {
    externals,
    plugins
  }
}