• 代理服务器配置


    Vue项目的根目录下创建一个vue.config.js文件,并添加以下代码:

    1. module.exports = {
    2. devServer: {
    3. proxy: {
    4. '/': {
    5. target: '目标服务器地址',
    6. changeOrigin: true,
    7. pathRewrite: {
    8. '^/': ''
    9. }
    10. }
    11. }
    12. }
    13. }

    上述代码中,我们使用devServer配置项来配置代理服务器。其中proxy属性用于配置代理的规则,/api表示需要代理的接口路径。target属性表示代理的目标服务器地址,changeOrigin属性表示是否改变请求的源地址,pathRewrite属性用于重写请求的路径。

    vue2在config文件中的index.js文件中进行修改

    1. 'use strict'
    2. // Template version: 1.3.1
    3. // see http://vuejs-templates.github.io/webpack for documentation.
    4. const path = require('path')
    5. module.exports = {
    6. dev: {
    7. // Paths
    8. assetsSubDirectory: 'static',
    9. assetsPublicPath: '/',
    10. proxyTable: {
    11. "/": {
    12. target: "http://localhost:9033", // 接口的域名
    13. changeOrigin: true, // 是否跨域
    14. WS:true,
    15. secure: false, // 如果是https接口,需要配置这个参数
    16. pathRewrite: {
    17. "^/": "", // 路径重写替换为空
    18. },
    19. },
    20. },
    21. // Various Dev Server settings
    22. host: '0.0.0.0', // can be overwritten by process.env.HOST
    23. port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    24. autoOpenBrowser: false,
    25. errorOverlay: true,
    26. notifyOnErrors: true,
    27. poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    28. // Use Eslint Loader?
    29. // If true, your code will be linted during bundling and
    30. // linting errors and warnings will be shown in the console.
    31. useEslint: true,
    32. // If true, eslint errors and warnings will also be shown in the error overlay
    33. // in the browser.
    34. showEslintErrorsInOverlay: false,
    35. /**
    36. * Source Maps
    37. */
    38. // https://webpack.js.org/configuration/devtool/#development
    39. devtool: 'cheap-module-eval-source-map',
    40. // If you have problems debugging vue-files in devtools,
    41. // set this to false - it *may* help
    42. // https://vue-loader.vuejs.org/en/options.html#cachebusting
    43. cacheBusting: true,
    44. cssSourceMap: true
    45. },
    46. build: {
    47. // Template for index.html
    48. index: path.resolve(__dirname, '../dist/index.html'),
    49. // Paths
    50. assetsRoot: path.resolve(__dirname, '../dist'),
    51. assetsSubDirectory: 'static',
    52. assetsPublicPath: '/',
    53. /**
    54. * Source Maps
    55. */
    56. productionSourceMap: true,
    57. // https://webpack.js.org/configuration/devtool/#production
    58. devtool: '#source-map',
    59. // Gzip off by default as many popular static hosts such as
    60. // Surge or Netlify already gzip all static assets for you.
    61. // Before setting to `true`, make sure to:
    62. // npm install --save-dev compression-webpack-plugin
    63. productionGzip: false,
    64. productionGzipExtensions: ['js', 'css'],
    65. // Run the build command with an extra argument to
    66. // View the bundle analyzer report after build finishes:
    67. // `npm run build --report`
    68. // Set to `true` or `false` to always turn it on or off
    69. bundleAnalyzerReport: process.env.npm_config_report
    70. }
    71. }

  • 相关阅读:
    你必须知道的Linux基础知识(一)
    day57|647. 回文子串、516.最长回文子序列
    连接到EC2,开启root登录
    jQuery实现黑暗模式
    Bentley STAAD.Pro 2023 中文版 图文安装教程
    frp内网穿透保姆级配置流程,让客户端电脑可以通过域名或者IP访问本地程序接口
    视频汇聚/视频云存储/视频监控管理平台EasyCVR部署后无法正常启用是什么问题?该如何解决?
    Spring Boot整合canal实现数据一致性解决方案解析-部署+实战
    Win 编程获取空闲时间、锁屏、重启、关机、休眠
    动态获取input框的值
  • 原文地址:https://blog.csdn.net/weixin_56848461/article/details/134421050