admin-fiveFollowing/vue.config.js

/**
 * @author chuzhixin 1204505056@qq.com
 * @description vue.config.js全局配置
 */
const path = require('path')
const {
    /* baseURL, */
    publicPath,
    assetsDir,
    outputDir,
    lintOnSave,
    transpileDependencies,
    title,
    abbreviation,
    devPort,
    providePlugin,
    build7z,
    donation,
} = require('./src/config')
const { webpackBarName, webpackBanner, donationConsole } = require('vab-config')

if (donation) donationConsole()
const { version, author } = require('./package.json')
const Webpack = require('webpack')
const WebpackBar = require('webpackbar')
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,
    css: {
        loaderOptions: {
            sass: {
                data: `
        @import "@/assets/css/index.scss";
        @import "@/assets/css/global.scss";
        `
            }
        }
    },
    devServer: {
        hot: true,
        port: devPort,
        open: true,
        noInfo: false,
        overlay: {
            warnings: true,
            errors: true,
        },
        // 注释掉的地方是前端配置代理访问后端的示例
        // proxy: {
        //   [baseURL]: {
        //     target: `http://你的后端接口地址`,
        //     ws: true,
        //     changeOrigin: true,
        //     pathRewrite: {
        //       ["^/" + baseURL]: "",
        //     },
        //   },
        // },
        after: mockServer(),
    },
    configureWebpack() {
        return {
            resolve: {
                alias: {
                    '@': resolve('src'),
                    '*': resolve(''),
                },
            },
            plugins: [
                new Webpack.ProvidePlugin(providePlugin),
                new WebpackBar({
                    name: webpackBarName,
                }),
            ],
        }
    },
    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
                .plugin('banner')
                .use(Webpack.BannerPlugin, [`${webpackBanner}${time}`])
                .end()
            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: {
            less: {
                lessOptions: {
                    javascriptEnabled: true,
                    modifyVars: {
                        'vab-color-blue': '#1890ff',
                        'vab-margin': '20px',
                        'vab-padding': '20px',
                        'vab-header-height': '54px',
                        'vab-breadcrumb-height': '37px',
                        'vab-public-height': 'calc(100vh - 130px)',
                    },
                },
            },
        },
    },
}