vue3 下载模板文件路径引用vite.config.js中的base

在Vue 3中，如果你使用Vite作为你的构建工具，你可以在`vite.config.js`配置文件中定义一个基础路径`base`，这个路径通常用于控制资源文件的引用路径。当你需要下载模板文件时，可以利用这个`base`路径来构建正确的资源URL。

举个例子，如果你在`vite.config.js`中设置了如下配置：

export default {
  base: '/my-project/',
};

然后在你的Vue组件中，你可能有一个按钮用来触发下载操作，你可能会写成：

<template>
  <button @click="downloadTemplate">下载模板</button>
</template>

<script>
export default {
  methods: {
    downloadTemplate() {
      // 假设模板文件位于public目录下
      const templatePath = '/my-project/templates/template.xlsx';
      window.location.href = templatePath;
    }
  }
};
</script>

在上述代码中，`downloadTemplate`方法中使用的`templatePath`变量就是结合了`vite.config.js`中定义的`base`路径和模板文件的相对路径构建的完整URL。

此外，如果你的模板文件位于`src`目录下，你需要确保文件被正确地复制到`dist`目录下，这通常可以通过配置Vite的`build.rollupOptions`实现：

export default {
  build: {
    rollupOptions: {
      assetsDir: 'assets',
      // 确保模板文件被包含在内
      output: {
        entryFileNames: `assets/[name].[hash].js`,
        chunkFileNames: `assets/[name].[hash].js`,
        assetFileNames: `assets/[name].[hash].[ext]`
      }
    }
  },
  base: '/my-project/',
};

通过上述配置，Vite会将模板文件复制到构建目录下的`dist/assets`目录中，然后你可以像上面的方法一样通过`base`路径构建下载链接。