vue3动态修改打包后的请求路径的操作代码

要动态修改打包后的请求路径，需要通过修改Vue CLI中的webpack配置实现。下面是具体的步骤：

1. 打开Vue项目所在目录，找到vue.config.js文件。如果该文件不存在则需要手动创建。

2. 使用process.env.BASE_URL获取当前项目的基础路径，然后将该路径保存到变量中，这个变量可以在需要的地方被引用。

javascript
const baseUrl = process.env.BASE_URL;

1. 找到webpack生成的HTML文件所需要的代码的位置，对代码进行修改。在修改之前先要获取该位置的loader，对于vue-cli生成的项目来说，这个位置的代码位于index.html模板中，并且使用了html-webpack-plugin插件以及内置的raw-loader。

javascript
config.plugin('html').tap(args => {
args[0].template = require('raw-loader!./public/index.html');
return args;
});

1. 修改该位置的代码，将其中的请求路径替换为打包后的路径。如下面的示例所示，将原本的url(../image/logo.png)修改为url(${baseUrl}/image/logo.png)。

javascript
config.plugin('html').tap(args => {
args[0].template = require('raw-loader!./public/index.html').replace(
/url\(\.\.\/image/g,
`url(${baseUrl}/image`
);
return args;
});

1. 使用变量引用需要动态修改的路径。在组件中使用变量引用路径时需要提前对变量进行定义，定义语句可以放在Vue实例之前。

```javascript
const baseUrl = process.env.BASE_URL;

new Vue({
router,
render: h => h(App)
}).$mount("#app");
```

下面是另外一个示例，在vue.config.js中将图片路径替换成CDN地址：

const baseUrl = process.env.BASE_URL;

module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule("svg");
    svgRule.uses.clear();
    svgRule
      .use("vue-svg-loader")
      .loader("vue-svg-loader")
      .options({
        svgo: {
          plugins: [{ removeViewBox: false }, { removeXMLNS: true }]
        }
      })
      .end();
  },
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
          use: [
            {
              loader: "url-loader",
              options: {
                limit: 4096,
                fallback: {
                  loader: "file-loader",
                  options: {
                    name: "img/[name].[hash:8].[ext]"
                  }
                }
              }
            }
          ]
        }
      ]
    }
  },
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "scss",
      patterns: []
    }
  },
  chainWebpack: config => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true;
        return options;
      });
  },
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "~@/assets/main.scss";`
      }
    }
  },
  pwa: {
    name: "vue-cli4-pwa-template",
    themeColor: "#4DBA87",
    msTileColor: "#000000",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "black",
    manifestOptions: {
      icons: [
        {
          src: "./img/icons/android-chrome-192x192.png",
          sizes: "192x192",
          type: "image/png"
        },
        {
          src: "./img/icons/android-chrome-512x512.png",
          sizes: "512x512",
          type: "image/png"
        },
        {
          src: "./img/icons/android-chrome-maskable-192x192.png",
          sizes: "192x192",
          type: "image/png",
          purpose: "maskable"
        },
        {
          src: "./img/icons/android-chrome-maskable-512x512.png",
          sizes: "512x512",
          type: "image/png",
          purpose: "maskable"
        }
      ]
    },
    workboxOptions: {
      // offline page
      offlineGoogleAnalytics: true,
      runtimeCaching: [
        {
          urlPattern: new RegExp(baseUrl),
          handler: "CacheFirst",
          options: {
            cacheName: "my-cache",
            expiration: {
              maxEntries: 10,
              maxAgeSeconds: 300
            }
          }
        }
      ]
    }
  },

  // 修改打包后的资源路径
  publicPath: baseUrl,

  // 开启gzip压缩
  productionSourceMap: false,
  configureWebpack: config => {
    if (process.env.NODE_ENV === "production") {
      config.plugins.push(new CompressionPlugin());
    }
  }
};

以上就是Vue 3中动态修改打包后的请求路径的完整攻略。