admin-fiveFollowing/vue.config.js

/**
 * @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:false,
    transpileDependencies,
    devServer: {
        hot: true,
        port: devPort,
        open: true,
        client: {
            overlay: false,
            // 也可以单独控制错误或警告：
            // overlay: {
            //   errors: false, // 关闭错误提示
            //   warnings: false // 关闭警告提示
            // }
        },
        // 注释掉的地方是前端配置代理访问后端的示例
        proxy: {
            './': {
                // target: 'https://qhome.usky.cn/fivapi/',
                target: 'http://192.168.20.140:8011/',
                ws: false,
                changeOrigin: true,
                pathRewrite: {
                    '^./': './'
                }
            }
        },
    },
    configureWebpack() {
        return {
            module: {
                rules: [{
                    test: /\.mjs$/,
                    include: /node_modules/,
                    type: "javascript/auto"
                }]
            },
            resolve: {
                alias: {
                    '@': resolve('src'),
                },
                fallback: {
                    'path': require.resolve('path-browserify')
                }
            },
            plugins: [
                new Webpack.ProvidePlugin(providePlugin),
                new WebpackBar({
                    name: webpackBarName,
                }),
            ],
            optimization: {
                splitChunks: {
                    chunks: 'all',
                    minSize: 20000,
                    cacheGroups: {
                        vendor: {
                            test: /[\\/]node_modules[\\/]/,
                            name: 'vendors',
                            chunks: 'all'
                        }
                    }
                }
            }
        }
    },
    chainWebpack(config) {
        config.resolve.symlinks(true)
        config.module
            .rule('svg')
            .exclude.add(resolve('src/assets/icons'))
            .end()
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/assets/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: {
        sourceMap: true,
        loaderOptions: {
            less: {
                lessOptions: {
                    javascriptEnabled: true,
                    modifyVars: {
                        'vab-color-blue': '#1890ff',
                    },
                },
            },
            sass: {
                additionalData: `
                    @import "@/assets/css/variables.module.scss";
                    @import "@/assets/css/index.scss";
                    @import "@/assets/css/global.scss";
                    @import "@/assets/css/element.scss";
                `
            },
        }
    },
}