vue.config.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. 'use strict'
  2. const path = require('path')
  3. const defaultSettings = require('./src/settings.js')
  4. const CompressionWebpackPlugin = require('compression-webpack-plugin')
  5. const {
  6. each,
  7. keys
  8. } = require('lodash')
  9. function resolve(dir) {
  10. return path.join(__dirname, dir)
  11. }
  12. const name = defaultSettings.title || '旺庄街道服务业科技企业统计平台' // page title
  13. // If your port is set to 80,
  14. // use administrator privileges to execute the command line.
  15. // For example, Mac: sudo npm run
  16. const ip = '0.0.0.0' // dev port
  17. const port = 9525 // dev port
  18. const pages = {
  19. index: {
  20. entry: 'src/main.js',
  21. template: 'public/index.html',
  22. filename: 'index.html',
  23. chunks: [
  24. 'manifest',
  25. 'index',
  26. 'chunk-index',
  27. 'chunk-mobile',
  28. 'chunk-vendor',
  29. 'chunk-common',
  30. 'chunk-vue',
  31. 'chunk-element'
  32. ]
  33. },
  34. mobile: {
  35. entry: 'src.mobile/main.js',
  36. template: 'public/mobile.html',
  37. filename: 'mobile.html',
  38. chunks: ['manifest', 'mobile', 'chunk-mobile', 'chunk-vendor', 'chunk-common', 'chunk-vue']
  39. }
  40. }
  41. // All configuration item explanations can be find in https://cli.vuejs.org/config/
  42. module.exports = {
  43. /**
  44. * You will need to set publicPath if you plan to deploy your site under a sub path,
  45. * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
  46. * then publicPath should be set to "/bar/".
  47. * In most cases please use '/' !!!
  48. * Detail: https://cli.vuejs.org/config/#publicpath
  49. */
  50. publicPath: '/ec/',
  51. outputDir: 'dist',
  52. assetsDir: 'static',
  53. lintOnSave: process.env.NODE_ENV === 'development',
  54. productionSourceMap: false,
  55. devServer: {
  56. open: true,
  57. host: ip,
  58. port: port,
  59. https: false,
  60. disableHostCheck: true,
  61. // 以上的ip和端口是我们本机的;下面为需要跨域的
  62. proxy: {
  63. // 配置跨域
  64. '/webServer': {
  65. // target: 'http://wy.idea-sf.com:9010/',
  66. // target: 'http://localhost:9991/',
  67. // target: 'http://localhost:9001/',
  68. target: "http://wztjpt.idea-sf.com/wztjpt/",
  69. // target: process.env.VUE_APP_WEB_API_URL,
  70. ws: true,
  71. changOrigin: true, // 允许跨域
  72. pathRewrite: {
  73. '^/webServer': '' // 请求的时候使用这个server就可以
  74. }
  75. }
  76. }
  77. },
  78. pages,
  79. configureWebpack: {
  80. // provide the app's title in webpack's name field, so that
  81. // it can be accessed in index.html to inject the correct title.
  82. name: name,
  83. resolve: {
  84. alias: {
  85. '@': resolve('src'),
  86. '@.mobile': resolve('src.mobile')
  87. }
  88. },
  89. externals: {
  90. vue: 'Vue',
  91. 'vue-router': 'VueRouter',
  92. axios: 'axios',
  93. 'element-ui': 'ELEMENT',
  94. qs: 'Qs',
  95. xlsx: 'XLSX'
  96. },
  97. plugins: [
  98. // gzip
  99. new CompressionWebpackPlugin({
  100. filename: '[path].gz[query]',
  101. test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
  102. threshold: 10240,
  103. minRatio: 0.8,
  104. deleteOriginalAssets: false
  105. })
  106. ]
  107. },
  108. chainWebpack(config) {
  109. // Remove prefetch preload settings for lazy load modules
  110. each(keys(pages), name => {
  111. config.plugins.delete(`prefetch-${name}`)
  112. config.plugins.delete(`preload-${name}`)
  113. })
  114. // set svg-sprite-loader
  115. config.module.rule('svg').exclude.add(resolve('src/icons')).end()
  116. config.module
  117. .rule('icons')
  118. .test(/\.svg$/)
  119. .include.add(resolve('src/icons'))
  120. .end()
  121. .use('svg-sprite-loader')
  122. .loader('svg-sprite-loader')
  123. .options({
  124. symbolId: 'icon-[name]'
  125. })
  126. .end()
  127. // set preserveWhitespace
  128. config.module
  129. .rule('vue')
  130. .use('vue-loader')
  131. .loader('vue-loader')
  132. .tap(options => {
  133. options.compilerOptions.preserveWhitespace = true
  134. return options
  135. })
  136. .end()
  137. config
  138. // https://webpack.js.org/configuration/devtool/#development
  139. .when(process.env.NODE_ENV === 'development', config =>
  140. config.devtool('cheap-source-map')
  141. )
  142. config.when(process.env.NODE_ENV !== 'development', config => {
  143. config
  144. .plugin('ScriptExtHtmlWebpackPlugin')
  145. .after('html')
  146. .use('script-ext-html-webpack-plugin', [{
  147. // `runtime` must same as runtimeChunk name. default is `runtime`
  148. inline: /runtime\..*\.js$/
  149. }])
  150. .end()
  151. config.optimization.runtimeChunk({
  152. name: 'manifest'
  153. })
  154. config.optimization.splitChunks({
  155. chunks: 'all',
  156. cacheGroups: {
  157. libs: {
  158. name: 'chunk-vendor',
  159. chunks: 'initial',
  160. minChunks: 1,
  161. test: /[\\/]node_modules[\\/]/,
  162. priority: 1,
  163. reuseExistingChunk: true,
  164. enforce: true
  165. },
  166. common: {
  167. name: 'chunk-common',
  168. chunks: 'initial',
  169. minChunks: 2,
  170. maxInitialRequests: 5,
  171. minSize: 0,
  172. priority: 2,
  173. reuseExistingChunk: true,
  174. enforce: true
  175. },
  176. // External dependencies that are only used by the index page
  177. index: {
  178. name: 'chunk-index',
  179. chunks: 'all',
  180. minChunks: 1,
  181. test: /[\\/]node_modules[\\/](sortablejs|screenfull|nprogress|hotkeys-js|fuse\.js|better-scroll|lowdb|shortid)[\\/]/,
  182. priority: 3,
  183. reuseExistingChunk: true,
  184. enforce: true
  185. },
  186. // External dependencies that are only used by the mobile page
  187. mobile: {
  188. name: 'chunk-mobile',
  189. chunks: 'all',
  190. minChunks: 1,
  191. test: /[\\/]node_modules[\\/](vant)[\\/]/,
  192. priority: 4,
  193. reuseExistingChunk: true,
  194. enforce: true
  195. },
  196. // Vue family packages
  197. vue: {
  198. name: 'chunk-vue',
  199. test: /[\\/]node_modules[\\/](vue|vue-router|vuex)[\\/]/,
  200. chunks: 'all',
  201. priority: 20,
  202. reuseExistingChunk: true,
  203. enforce: true
  204. },
  205. // only element-ui
  206. element: {
  207. name: 'chunk-element',
  208. test: /[\\/]node_modules[\\/]element-ui[\\/]/,
  209. chunks: 'all',
  210. priority: 15,
  211. reuseExistingChunk: true,
  212. enforce: true
  213. }
  214. }
  215. })
  216. })
  217. }
  218. }