邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

vue.config.js 4.9 KiB

1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. // const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  2. const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 压缩js
  3. const imageWebpackLoader = require('image-webpack-loader');//压缩图片
  4. const path = require('path');
  5. const resolve = dir => {
  6. return path.join(__dirname, dir)
  7. }
  8. let timeStamp = new Date().getTime();
  9. let externals = {}
  10. let cdn = { css: [], js: [] }
  11. // const isProduction = process.env.VUE_APP_ENV == 'production' // 判断是否是生产环境
  12. const isProduction = true
  13. if (isProduction) {
  14. externals = {
  15. /**
  16. * externals 对象属性解析:
  17. * '包名' : '在项目中引入的名字'
  18. */
  19. 'vue': 'Vue',
  20. 'vant': 'vant',
  21. 'element-ui': 'ELEMENT',
  22. // 'vuex': 'Vuex',
  23. // 'vue-router': 'VueRouter',
  24. }
  25. cdn = {
  26. css: [
  27. 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
  28. ],
  29. js: [
  30. // vue must at first!
  31. 'https://unpkg.com/vue@2.6.11/dist/vue.js', // vuejs
  32. 'https://unpkg.com/vant@2.12.48/lib/vant.min.js', //vant
  33. 'https://unpkg.com/element-ui@2.15.12/lib/index.js', // element-ui js
  34. // 'https://cdn.bootcdn.net/ajax/libs/vuex/3.4.0/vuex.global.min.js',//vuex
  35. // 'https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.global.min.js',//vue-router
  36. ]
  37. }
  38. }
  39. module.exports = {
  40. configureWebpack: {
  41. output: { // 输出重构 打包编译后的js文件名称,添加时间戳.
  42. filename: `js/js[name].${timeStamp}.js`,
  43. chunkFilename: `js/chunk.[id].${timeStamp}.js`,
  44. },
  45. resolve: {
  46. alias: {
  47. '@': path.resolve(__dirname, 'src')
  48. }
  49. },
  50. externals,
  51. },
  52. css: {
  53. extract: { // 打包后css文件名称添加时间戳
  54. filename: `css/[name].${timeStamp}.css`,
  55. chunkFilename: `css/chunk.[id].${timeStamp}.css`,
  56. },
  57. loaderOptions: {
  58. css: {
  59. },
  60. // postcss: {
  61. // // options here will be passed to postcss-loader
  62. // plugins: [require('postcss-px2rem')({
  63. // remUnit: 75
  64. // })]
  65. // }
  66. }
  67. },
  68. pwa: {
  69. iconPaths: {
  70. favicon32: 'favicon.ico',
  71. favicon16: 'favicon.ico',
  72. appleTouchIcon: 'favicon.ico',
  73. maskIcon: 'favicon.ico',
  74. msTileImage: 'favicon.ico'
  75. }
  76. },
  77. //http://www.metavatar.cc/
  78. devServer: {
  79. overlay: {
  80. warnings: false,
  81. errors: false
  82. },
  83. proxy: {
  84. '/api': {
  85. // target: 'https://smapitestmalls,iformall.com/C/api',
  86. target: process.env.VUE_APP_API_ROOT + '/api',
  87. changeOrigin: true,
  88. pathRewrite: {
  89. '^/api': ''
  90. },
  91. },
  92. }
  93. },
  94. lintOnSave: false,
  95. publicPath: './', // 打包后引用的资源路径
  96. chainWebpack: config => {
  97. // favicon图标
  98. config.plugin('html').tap(args => {
  99. args[0].favicon = './public/favicon.ico';
  100. return args;
  101. });
  102. // 注入cdn变量 (打包时会执行)
  103. config.plugin('html').tap(args => {
  104. args[0].cdn = cdn // 配置cdn给插件
  105. return args
  106. })
  107. // 图片路径
  108. config.module.rule('images')
  109. .use('url-loader')
  110. .tap(options => ({
  111. name: './assets/images/[name].[ext]',
  112. quality: 85,
  113. limit: 0,
  114. esModule: false,
  115. }))
  116. //图片压缩
  117. config.module
  118. .rule('images')
  119. .use('image-webpack-loader')
  120. .loader('image-webpack-loader')
  121. .options({
  122. mozjpeg: {
  123. progressive: true,
  124. quality: 65
  125. },
  126. optipng: {
  127. enabled: false
  128. },
  129. pngquant: {
  130. quality: [0.65, 0.9],
  131. speed: 4
  132. },
  133. gifsicle: {
  134. interlaced: false
  135. },
  136. webp: {
  137. quality: 75
  138. }
  139. })
  140. .end();
  141. // 压缩js,只能线上,本地会js访问错误,会将js压缩成.gz文件
  142. if (process.env.VUE_APP_ENV != 'development') {
  143. config.plugin('compression-webpack-plugin').use(new CompressionWebpackPlugin({
  144. test: /\.(js|css|scss|woff|woff2|ttf)$/, // 匹配文件名
  145. threshold: 20480, // 对超过20k的数据压缩
  146. minRatio: 0.8,
  147. deleteOriginalAssets: true // 删除源文件
  148. }))
  149. // 压缩字体
  150. // config.module.rule('fonts').use('url-loader')
  151. // .tap(options => {
  152. // options.limit=8192;
  153. // options.name='[name].[ext]';
  154. // return options;
  155. // });
  156. // config.plugin('compression').use(CompressionWebpackPlugin);
  157. }
  158. }
  159. // configureWebpack: {
  160. // plugins: [
  161. // //打包环境去掉console.log
  162. // new UglifyJsPlugin({
  163. // uglifyOptions: {
  164. // compress: {
  165. // drop_console: true, //注释console
  166. // drop_debugger: true, //注释debugger
  167. // pure_funcs: ['console.log'], //移除console.log
  168. // },
  169. // },
  170. // }),
  171. // ],
  172. // }
  173. }