| 提交 | 用户 | 时间 | ||
| a6316e | 1 | 'use strict' |
| A | 2 | const path = require('path') |
| 3 | ||
| 4 | function resolve(dir) { | |
| 5 | return path.join(__dirname, dir) | |
| 6 | } | |
| 7 | ||
| 8 | const CompressionPlugin = require('compression-webpack-plugin') | |
| 9 | ||
| 10 | const name = process.env.VUE_APP_TITLE || 'BillionMes管理系统' // 网页标题 | |
| 11 | ||
| 12 | const port = process.env.port || process.env.npm_config_port || 80 // 端口 | |
| 13 | ||
| 14 | // vue.config.js 配置说明 | |
| 15 | //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions | |
| 16 | // 这里只列一部分，具体配置参考文档 | |
| 17 | module.exports = { | |
| 18 | // 部署生产环境和开发环境下的URL。 | |
| 19 | // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上 | |
| 20 | // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。 | |
| fb3b3e | 21 | // publicPath: process.env.NODE_ENV === "production" ? "/" : "/", |
| 吴 | 22 | publicPath: "./", |
| a6316e | 23 | // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist） |
| A | 24 | outputDir: 'dist', |
| 25 | // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下） | |
| 26 | assetsDir: 'static', | |
| 27 | // 是否开启eslint保存检测，有效值：ture | false | 'error' | |
| 28 | lintOnSave: process.env.NODE_ENV === 'development', | |
| 29 | // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。 | |
| fb3b3e | 30 | productionSourceMap: true, |
| a6316e | 31 | transpileDependencies: ['quill'], |
| A | 32 | // webpack-dev-server 相关配置 |
| 33 | devServer: { | |
| 34 | host: '0.0.0.0', | |
| 35 | port: port, | |
| 36 | open: true, | |
| 37 | proxy: { | |
| 38 | // detail: https://cli.vuejs.org/config/#devserver-proxy | |
| 39 | [process.env.VUE_APP_BASE_API]: { | |
| 7737ed | 40 | target: `http://127.0.0.1:8081`, |
| a6316e | 41 | changeOrigin: true, |
| A | 42 | pathRewrite: { |
| 43 | ['^' + process.env.VUE_APP_BASE_API]: '' | |
| 44 | } | |
| 45 | } | |
| 46 | }, | |
| 47 | disableHostCheck: true | |
| 48 | }, | |
| 49 | css: { | |
| 50 | loaderOptions: { | |
| 51 | sass: { | |
| 52 | sassOptions: { outputStyle: "expanded" } | |
| 53 | } | |
| 54 | } | |
| 55 | }, | |
| 56 | configureWebpack: { | |
| 57 | name: name, | |
| 58 | resolve: { | |
| 59 | alias: { | |
| 60 | '@': resolve('src') | |
| 61 | } | |
| 62 | }, | |
| 63 | plugins: [ | |
| 64 | // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件 | |
| 65 | new CompressionPlugin({ | |
| 66 | cache: false, // 不启用文件缓存 | |
| 67 | test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i, // 压缩文件格式 | |
| 68 | filename: '[path][base].gz[query]', // 压缩后的文件名 | |
| 69 | algorithm: 'gzip', // 使用gzip压缩 | |
| 70 | minRatio: 0.8, // 压缩比例，小于 80% 的文件不会被压缩 | |
| 71 | deleteOriginalAssets: false // 压缩后删除原文件 | |
| 72 | }) | |
| 73 | ], | |
| 74 | }, | |
| 75 | chainWebpack(config) { | |
| 76 | config.plugins.delete('preload') // TODO: need test | |
| 77 | config.plugins.delete('prefetch') // TODO: need test | |
| 78 | ||
| 79 | // set svg-sprite-loader | |
| 80 | config.module | |
| 81 | .rule('svg') | |
| 82 | .exclude.add(resolve('src/assets/icons')) | |
| 83 | .end() | |
| 84 | config.module | |
| 85 | .rule('icons') | |
| 86 | .test(/\.svg$/) | |
| 87 | .include.add(resolve('src/assets/icons')) | |
| 88 | .end() | |
| 89 | .use('svg-sprite-loader') | |
| 90 | .loader('svg-sprite-loader') | |
| 91 | .options({ | |
| 92 | symbolId: 'icon-[name]' | |
| 93 | }) | |
| 94 | .end() | |
| 95 | ||
| 96 | config.when(process.env.NODE_ENV !== 'development', config => { | |
| 97 | config | |
| 98 | .plugin('ScriptExtHtmlWebpackPlugin') | |
| 99 | .after('html') | |
| 100 | .use('script-ext-html-webpack-plugin', [{ | |
| 101 | // `runtime` must same as runtimeChunk name. default is `runtime` | |
| 102 | inline: /runtime\..*\.js$/ | |
| 103 | }]) | |
| 104 | .end() | |
| 105 | ||
| 106 | config.optimization.splitChunks({ | |
| 107 | chunks: 'all', | |
| 108 | cacheGroups: { | |
| 109 | libs: { | |
| 110 | name: 'chunk-libs', | |
| 111 | test: /[\\/]node_modules[\\/]/, | |
| 112 | priority: 10, | |
| 113 | chunks: 'initial' // only package third parties that are initially dependent | |
| 114 | }, | |
| 115 | elementUI: { | |
| 116 | name: 'chunk-elementUI', // split elementUI into a single package | |
| 117 | test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm | |
| 118 | priority: 20 // the weight needs to be larger than libs and app or it will be packaged into libs or app | |
| 119 | }, | |
| 120 | commons: { | |
| 121 | name: 'chunk-commons', | |
| 122 | test: resolve('src/components'), // can customize your rules | |
| 123 | minChunks: 3, // minimum common number | |
| 124 | priority: 5, | |
| 125 | reuseExistingChunk: true | |
| 126 | } | |
| 127 | } | |
| 128 | }) | |
| 129 | config.optimization.runtimeChunk('single') | |
| 130 | }) | |
| 131 | } | |
| 132 | } | |
