page_datareport/vue.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const merge = require('webpack-merge')
// eslint-disable-next-line @typescript-eslint/no-var-requires
const tsImportPluginFactory = require('ts-import-plugin')
// eslint-disable-next-line @typescript-eslint/no-var-requires
const autoprefixer = require('autoprefixer')
// eslint-disable-next-line @typescript-eslint/no-var-requires
// const pxtorem = require('postcss-pxtorem')
// eslint-disable-next-line @typescript-eslint/no-var-requires
const pxtoviewport = require('postcss-px-to-viewport')

const externals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  axios: 'axios',
  'js-cookie': 'Cookies',
  vant: 'vant',
  moment: 'moment'
}

// cdn地址获取访问(国外): https://www.jsdelivr.com/
// cdn地址获取访问(国内): https://www.bootcdn.cn/

const cdn = {
  css: [
    // '//unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css'
  ],
  js: [
    '//cdn-common.jianyu360.com/cdn/lib/vue/2.6.14/vue.min.js',
    '//cdn-common.jianyu360.com/cdn/lib/vue-router/3.1.5/vue-router.min.js',
    '//cdn-common.jianyu360.com/cdn/lib/vuex/3.4.0/vuex.min.js',
    '//cdn-common.jianyu360.com/cdn/lib/vant/2.8.2/lib/vant.min.js',
    '//cdn-common.jianyu360.com/cdn/lib/axios/0.19.2/axios.min.js',
    '//cdn-common.jianyu360.com/cdn/lib/js-cookie/2.2.1/js.cookie.min.js',
    '//cdn-common.jianyu360.com/cdn/lib/moment/2.29.1/min/moment.min.js',
    '//cdn-common.jianyu360.com/cdn/lib/jquery/3.6.0/jquery.min.js',
    '//res.wx.qq.com/open/js/jweixin-1.6.0.js'
  ]
}

const s_version = process.env.npm_package_version.replace(/\./g, '')

module.exports = {
  publicPath: process.env.BASE_URL,
  parallel: false,
  productionSourceMap: false,
  outputDir: 'datareport',
  devServer: {
    port: '8080',
    open: false,
    disableHostCheck: true,
    proxy: {
      '^/datareport/api': {
        target: 'app5://web3-jytest.jydev.jianyu360.com',
        changeOrigin: true,
        logLevel: 'debug',
        pathRewrite: {
          '^/datareport/api': '/datareport/api'
        }
      },
      '^/jypay': {
        target: 'http://app5-jytest.jydev.jianyu360.com',
        changeOrigin: true,
        logLevel: 'debug',
        pathRewrite: {
          '^/jypay': '/jypay'
        }
      },
      '^/subscribepay': {
        target: 'http://app5-jytest.jydev.jianyu360.com',
        changeOrigin: true,
        logLevel: 'debug',
        pathRewrite: {
          '^/subscribepay': '/subscribepay'
        }
      }
    }
  },
  css: {
    // extract: {
    //   filename: 'css/[name].[contenthash:10].css?v=[contenthash:8]',
    //   chunkFilename: 'css/[name].[contenthash:10].css?v=[contenthash:8]'
    // },
    loaderOptions: {
      sass: {
        prependData: '@import "@/style/_mixin.scss";@import "@/style/_variables.scss";' // 全局引入
      },
      postcss: {
        plugins: [
          autoprefixer(),
          pxtoviewport(({
            unitToConvert: 'px',
            viewportWidth: 375,
            unitPrecision: 5,
            propList: [
              '*'
            ],
            viewportUnit: 'vw',
            fontViewportUnit: 'vw',
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            exclude: /(\/|\\)(node_modules)(\/|\\)/
          }))
          // pxtorem({
          //   rootValue: 37.5,
          //   propList: ['*']
          // })
        ]
      }
    }
  },
  chainWebpack: config => {
    // 防止多页面打包卡顿
    // eslint-disable-next-line no-unused-expressions
    // config.plugins.delete('named-chunks')
    if (process.env.NODE_ENV === 'production') {
      // config.output
      //   .chunkFilename('js/[name].[contenthash:10].js?v=[contenthash:8]')
      //   .filename('js/[name].[contenthash:10].js?v=[contenthash:8]')
      // 打包时需要执行，开发环境运行不需要执行
      config.externals(externals)

      // 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
      config.plugin('html').tap(args => {
        // https://github.com/DanielRuf/html-minifier-terser#options-quick-reference
        // 禁止html压缩去空行
        // args[0].minify.collapseWhitespace = false

        // html中添加cdn
        args[0].cdn = cdn
        args[0].version = s_version
        args[0].assets = {
          version: Date.now()
        }
        return args
      })
    } else {
      config.plugin('html').tap(args => {
        // html中添加wxjsssk的cdn
        args[0].cdn = {
          js: [
            // 倒数第1个 jweixin-1.6.0.js
            cdn.js[cdn.js.length - 1],
            // 倒数第2个 jquery.min.js
            cdn.js[cdn.js.length - 2]
          ]
        }
        return args
      })
    }

    // 分析静态资源
    if (process.env.use_analyzer) {
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }

    // 修复HMR
    config.resolve.symlinks(true)

    config.module
      .rule('ts')
      .use('ts-loader')
      .tap(options => {
        options = merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              tsImportPluginFactory({
                libraryName: 'vant',
                libraryDirectory: 'es',
                style: true
              })
            ]
          }),
          compilerOptions: {
            module: 'es2015'
          }
        })
        return options
      })
  }
}