vue.config.js 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. const CompressionPlugin = require("compression-webpack-plugin");
  2. module.exports = {
  3. productionSourceMap: false,
  4. //publicPath: process.env.NODE_ENV === 'production'
  5. // ? '/vueScreen/'
  6. // : '/',
  7. publicPath:'./',
  8. devServer: {
  9. open: true,
  10. // host: "10.16.4.3",
  11. port: 8080,
  12. https: false,
  13. hotOnly: false,
  14. proxy: {
  15. "/bigScreen": {
  16. target: "https://mz.tshe.cn/bigScreen", // 生产后端路径
  17. ws: true, // 是否启用websockets
  18. changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
  19. pathRewrite: {
  20. "^/bigScreen": "" //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add',直接写'/api/user/add'即可
  21. }
  22. },
  23. "/collection": {
  24. target: "https://mz.tshe.cn/collection", // 生产后端路径
  25. // target: "https://info.windd.cn/collection", // 生产后端路径
  26. ws: true, // 是否启用websockets
  27. changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
  28. pathRewrite: {
  29. "^/collection": "" //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add',直接写'/api/user/add'即可
  30. }
  31. },
  32. }
  33. },
  34. configureWebpack: () => {
  35. if (process.env.NODE_ENV === 'production') {
  36. return {
  37. plugins: [
  38. new CompressionPlugin({
  39. test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
  40. threshold: 10240, // 归档需要进行压缩的文件大小最小值,我这个是10K以上的进行压缩
  41. deleteOriginalAssets: false // 是否删除原文件
  42. })
  43. ],
  44. }
  45. }
  46. },
  47. css: {
  48. loaderOptions: {
  49. postcss: {
  50. // 这是rem适配的配置 注意: remUnit在这里要根据lib-flexible的规则来配制,如果您的设计稿是750px的,用75就刚刚好。
  51. plugins: [
  52. require("postcss-px2rem")({
  53. remUnit: 192
  54. })
  55. ]
  56. }
  57. }
  58. }
  59. };