/** * @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') const CompressionWebpackPlugin = require('compression-webpack-plugin') const productionGzipExtensions = [ 'js', 'css', 'html', 'svg', 'json', 'txt', 'ico', ] // 是否开启gzip压缩 const isPro = process.env.NODE_ENV === 'production' // const isPro = false 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 || 'vue-admin-beautiful' 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: { // host: 'localhost', hot: true, // port: 9999, // // open: true, // // noInfo: false, // // overlay: { // // warnings: true, // // errors: true, // // }, // // 注释掉的地方是前端配置代理访问后端的示例 // proxy: { // '/renren-admin': { // target: `http://15.2.21.238:8888`, // // ws: true, // changeOrigin: true, // // pathRewrite: { // // '^/': '/renren-admin/', // // }, // }, // }, // 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/icon/remixIcon')).end() config.module .rule('remixIcon') .test(/\.svg$/) .include.add(resolve('src/icon/remixIcon')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'remix-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 (isPro) { // 生产环境下使用gzip 压缩 config.plugin('compressionPlugin').use( new CompressionWebpackPlugin({ // filename: '[path].gz[query]', algorithm: 'gzip', test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), threshold: 10240, // 只有大小大于该值的资源会被处理 10240 minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理 deleteOriginalAssets: false, // 删除原文件 }) ) } 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': '65px', }, }, }, }, }, }