ele-usky-admin/vue.config.js

/**
 * @description vue.config.js全局配置
 */
const path = require('path')
const {
  /* baseURL, */
  publicPath,
  assetsDir,
  outputDir,
  lintOnSave,
  transpileDependencies,
  title,
  abbreviation,
  devPort,
  providePlugin,
  build7z,
  webpackBarName,
} = require('./src/config')

const { version, author } = require('./package.json')
const Webpack = require('webpack')
const WebpackBar = require('webpackbar')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const FileManagerPlugin = require('filemanager-webpack-plugin')
const dayjs = require('dayjs')
const date = dayjs().format('YYYY_M_D')
const time = dayjs().format('YYYY-M-D HH:mm:ss')
process.env.VUE_APP_TITLE = title || '欢迎使用用电后台管理平台!'
process.env.VUE_APP_AUTHOR = author || 'chuzhixin'
process.env.VUE_APP_UPDATE_TIME = time
process.env.VUE_APP_VERSION = version

const resolve = (dir) => {
  return path.join(__dirname, dir)
}

// const mockServer = () => {
//     if (process.env.NODE_ENV === 'development') {
//         return require('./mock/mockServer.js')
//     } else {
//         return ''
//     }
// }

module.exports = {
  publicPath,
  assetsDir,
  outputDir,
  lintOnSave,
  transpileDependencies,
  devServer: {
    hot: true,
    port: devPort,
    open: true,
    noInfo: false,
    overlay: {
      warnings: true,
      errors: true,
    },
    disableHostCheck: true,

    // 注释掉的地方是前端配置代理访问后端的示例
    proxy: {
      //   [baseURL]: {
      //     target: `http://你的后端接口地址`,
      //     ws: true,
      //     changeOrigin: true,
      //     pathRewrite: {
      //       ["^/" + baseURL]: "",
      //     },
      //   },
      './': {
        target: 'https://qhome.usky.cn/uskypower/',
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^./': './',
        },
      },
    },
    // public: 'localhost:9999/',
    // after: mockServer(),
  },
  configureWebpack() {
    return {
      externals: {
        AMap: 'AMap',
      },
      module: {
        rules: [
          {
            test: /\.mjs$/,
            include: /node_modules/,
            type: 'javascript/auto',
          },
        ],
      },
      resolve: {
        alias: {
          '@': resolve('src'),
          '*': resolve(''),
        },
      },
      plugins: [
        new Webpack.ProvidePlugin(providePlugin),
        new WebpackBar({
          name: webpackBarName,
        }),
        // new UglifyJsPlugin({
        //     uglifyOptions: {
        //         output: {
        //             comments: false, // 去掉注释
        //         },
        //         warnings: false,
        //         compress: {
        //             drop_console: true,
        //             drop_debugger: false,
        //             pure_funcs: ['console.log']//移除console
        //         }
        //     }
        // })
      ],
    }
  },
  chainWebpack(config) {
    config.resolve.symlinks(true)
    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()

    config.when(process.env.NODE_ENV === 'development', (config) => {
      config.devtool('source-map')
    })

    config.when(process.env.NODE_ENV !== 'development', (config) => {
      config.performance.set('hints', false)
      config.devtool('none')
      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          libs: {
            name: 'vue-admin-beautiful-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial',
          },
        },
      })
      config.module
        .rule('images')
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          bypassOnDebug: true,
        })
        .end()
    })

    if (build7z) {
      config.when(process.env.NODE_ENV === 'production', (config) => {
        config
          .plugin('fileManager')
          .use(FileManagerPlugin, [
            {
              onEnd: {
                delete: [`./${outputDir}/video`, `./${outputDir}/data`],
                archive: [
                  {
                    source: `./${outputDir}`,
                    destination: `./${outputDir}/${abbreviation}_${outputDir}_${date}.7z`,
                  },
                ],
              },
            },
          ])
          .end()
      })
    }
  },
  runtimeCompiler: true,
  productionSourceMap: false,
  css: {
    requireModuleExtension: true,
    sourceMap: true,
    loaderOptions: {
      sass: {
        // additionalData: `
        //     @import "@/assets/css/index.scss"; 
        //     @import "@/assets/css/global.scss";
        //     `,
      },
      less: {
        lessOptions: {
          javascriptEnabled: true,
          modifyVars: {
            'vab-color-blue': '#1890ff',
            'vab-margin': '15px',
            'vab-padding': '15px',
            'vab-header-height': '60px',
            'vab-breadcrumb-height': '37px',
            'vab-public-height': 'calc(100vh - 130px)',
          },
        },
      },
    },
  },
}