vue.config.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. const path = require('path')
  2. function resolve (dir) {
  3. return path.join(__dirname, dir)
  4. }
  5. module.exports = {
  6. productionSourceMap: false,
  7. publicPath: './',
  8. outputDir: 'dist',
  9. configureWebpack: {
  10. optimization: {
  11. splitChunks: {
  12. cacheGroups: {
  13. app: {
  14. chunks: 'all',
  15. name: 'main',
  16. test: /[\\/]src[\\/](.*)[\\/]/
  17. },
  18. vendor: {
  19. test: /[\\/]node_modules[\\/][\\/]/,
  20. name: 'vendor',
  21. chunks: 'all'
  22. }
  23. }
  24. }
  25. }
  26. },
  27. css: {
  28. loaderOptions: {
  29. less: {
  30. modifyVars: {},
  31. javascriptEnabled: true
  32. }
  33. }
  34. },
  35. devServer: {
  36. open: true,
  37. /* 设置为0.0.0.0则所有的地址均能访问 */
  38. host: '0.0.0.0',
  39. port: 8081,
  40. https: false,
  41. hotOnly: false,
  42. proxy: {
  43. /* 详解:
  44. 1、proxy 里面的'/api'什么意思?
  45. 答:作用是是告诉node, 我的接口要是以'/api'开头的才用代理.例如:App.vue中的请求接口地址 "/api/user" 符合以/api开口的条件,所以会被代理, 最后代理的路径 由http://localhost:8081/api/user ==》变成 http://10.10.38.94:3000/api/user
  46. 虽然浏览器的Network的Headers/General URL还是http://localhost:8081/api/user,但实际上在请求后,被node代理服务器悄悄代理成了http://10.10.38.94:3000/api/user再去请求真实后代接口地址
  47. 2、pathRewrite里面的‘^/api’:'' 什么意思?
  48. 答:由上面可知,代理成了http://10.10.38.94:3000/api/user,但是我们实际的真实后台接口地址是http://10.10.38.94:3000/user,所以在请求前一刻,需要将/api去除(把/api给重写成空字符串了)。
  49. '^/api'是一个正则表达式,表示要匹配请求的url中,全部http://localhost:8081/api/user 转接为 http://10.10.38.94:3000/user
  50. */
  51. '/api': {
  52. /* 目标代理服务器地址 */
  53. // target: 'https://wmsxz.yfve.com.cn/',
  54. // target: 'https://bi.ciemis.com/api/',
  55. // target: 'https://mi.ciemis.com/api/',
  56. target: 'http://localhost:9090/',
  57. // target: 'http://172.19.138.173:2020/',
  58. /* 允许跨域 */
  59. changeOrigin: true,
  60. logLevel: 'debug',
  61. pathRewrite: {
  62. '^/api': ''
  63. }
  64. }
  65. }
  66. },
  67. chainWebpack: config => {
  68. // config.resolve.alias.set("@$", resolve("src")).set("@views", resolve("src/views"));
  69. config.resolve.alias.set('@$', resolve('src'))
  70. },
  71. assetsDir: 'assets',
  72. runtimeCompiler: true,
  73. transpileDependencies: [
  74. 'vuetify'
  75. ]
  76. }