vue.config.js 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. const { defineConfig } = require('@vue/cli-service')
  2. const path = require('path')
  3. const webpack = require('webpack')
  4. const CompressionWebpackPlugin = require("compression-webpack-plugin");
  5. // import postCssPxToRem from 'postcss-pxtorem'
  6. function resolve(dir) {
  7. return path.join(__dirname, dir)
  8. }
  9. module.exports = defineConfig({
  10. transpileDependencies: true,
  11. pages: {
  12. index: {
  13. // page 的入口
  14. entry: 'src/main.js',
  15. // 模板来源
  16. template: 'public/index.html',
  17. // 在 dist/index.html 的输出
  18. filename: 'index.html',
  19. // 当使用 title 选项时,
  20. // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  21. title: '上海中心大厦',
  22. // 在这个页面中包含的块,默认情况下会包含
  23. // 提取出来的通用 chunk 和 vendor chunk。
  24. chunks: ['chunk-vendors', 'chunk-common', 'index']
  25. }
  26. },
  27. // ...other config
  28. configureWebpack: config => {
  29. config.performance = {
  30. hints: 'warning',
  31. //入口起点的最大体积 整数类型(以字节为单位)
  32. maxEntrypointSize: 50000000,
  33. //生成文件的最大体积 整数类型(以字节为单位 300k)
  34. maxAssetSize: 30000000,
  35. //只给出 js 文件的性能提示
  36. assetFilter: function (assetFilename) {
  37. return assetFilename.endsWith('.js')
  38. }
  39. }
  40. const plugins = [];
  41. // 同externals一样,我们只想在生产环境下生成gzip即可
  42. if (process.env.NODE_ENV === 'production') {
  43. plugins.push(
  44. new CompressionWebpackPlugin({
  45. filename: '[path][base].gz[query]', // 生成的文件名
  46. algorithm: 'gzip', // 类型
  47. test: new RegExp('\\.(js|css)$'), // 匹配规则
  48. threshold: 10240, // 字节数 只处理比这个大的资源
  49. minRatio: 0.8, // 压缩率 只有比这个小的才会处理
  50. // 是否删除源文件,默认: false
  51. deleteOriginalAssets: false
  52. })
  53. )
  54. }
  55. config.plugins = [
  56. ...config.plugins,
  57. ...plugins
  58. ]
  59. // 增加加载 .geojson 文件的规则
  60. let rules = [{
  61. test: /\.geojson$/,
  62. loader: 'json-loader'
  63. }]
  64. config.module.rules = [
  65. ...config.module.rules,
  66. ...rules
  67. ]
  68. },
  69. productionSourceMap: false, //打包不生成js.map文件
  70. chainWebpack: (config) => {
  71. config.resolve.alias
  72. .set('@$', resolve('src'))
  73. .set('@static', resolve('public/static'))
  74. },
  75. pluginOptions: {
  76. "style-resources-loader": {
  77. preProcessor: "less",
  78. patterns: [
  79. path.resolve(__dirname, 'src/assets/less/variable.less')
  80. ]
  81. }
  82. },
  83. devServer: {
  84. port: 2011,
  85. }
  86. })