关于vue src路径动态拼接的小知识

首先我们需要了解一下Vue中app的文件结构。在默认情况下，我们会在src目录下创建一个main.js的文件作为vue应用的入口文件。

在Vue中，我们可以使用相对路径引入我们的组件等资源，如：

import App from "./components/App.vue";

但是，由于在不同的环境下，我们的文件路径可能会发生变化，所以我们需要一种动态拼接路径的方式来解决这个问题。

一种常见的解决方案是，在项目的根目录中创建一个config.js文件，用来配置不同环境中的文件路径，如：

// config.js
const isProduction = process.env.NODE_ENV === "production";

export default {
  // 公共路径（实际上是资源路径）
  publicPath: isProduction ? "/production/path/" : "/dev/path/",
  // 图片路径
  imgPath: isProduction ? "/production/path/img/" : "/dev/path/img/",
};

在main.js中引入config.js，并根据需要进行路径拼接，如：

// main.js
import Vue from "vue";
import App from "./components/App.vue";
import config from "../config";

Vue.config.productionTip = false;

// 创建Vue实例
new Vue({
  // 根据配置动态拼接组件路径
  render: (h) => h(App),
  // 根据配置指定资源路径
  // 在template中使用路径： <img :src="`${imgPath}/logo.png`" />
  data: {
    imgPath: config.imgPath,
  },
}).$mount("#app");

在Vue组件中使用动态路径的方式与在main.js中类似。例如：

<template>
  <div>
    <img :src="`${imgPath}/logo.png`" />
  </div>
</template>

<script>
import config from "../../config";

export default {
  data() {
    return {
      // 根据配置指定资源路径
      imgPath: config.imgPath,
    };
  },
};
</script>

这样，我们就可以在不同的环境中正确地使用资源路径。

再举一个示例，假设我们在Vue项目中使用了axios库来发送HTTP请求。axios默认情况下会将请求的url以相对路径的方式解析，同样会受到环境路径的影响。我们可以将axios的默认baseURL设置为动态的根路径，如：

// main.js
import Vue from "vue";
import App from "./components/App.vue";
import axios from "axios";
import config from "../config";

Vue.config.productionTip = false;

// 设置axios的默认baseURL
axios.defaults.baseURL = config.publicPath;

// 创建Vue实例
new Vue({
  // 根据配置动态拼接组件路径
  render: (h) => h(App),      
}).$mount("#app");

这样，在我们的组件中使用axios发送请求时，就不需要手动拼接根路径了，类似这样：

axios.get("/api/data").then((res) => {
  console.log(res.data);
});

而axios会自动将url拼接为根路径+请求的相对路径。

希望这些示例可以帮助你理解如何在Vue项目中动态拼接路径。