1，vue-cli2 和 vue-cli3 的docx模版所放的位置不同

vue-cli2 的模版放在static文件夹下面
vue-cli3 的模版放在public文件夹下面下图的peopleout.docx 是模版，用的vue-cli3的脚手架

2，引入模版的路径问题

刚开始在网上搜的方案都是用的相对路径，老是报一个错误，大概意思的找不到模版，我路径写的明明没有问题，

后来终于遇到了明白人，不能用相对路径，直接用根路径，原谅我才疏学浅，说不出原理

简单粗暴，下面沾上完整代码
用到的插件

-- 安装 docxtemplater
cnpm install docxtemplater pizzip  --save

-- 安装 jszip-utils
cnpm install jszip-utils --save 

-- 安装 jszip
cnpm install jszip --save

-- 安装 FileSaver
cnpm install file-saver --save


没有cnpm可以使用npm

<template>
  <button @click="daochu(message)">导出</button>
</template>

<script>
import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'
export default {
  name: 'App',
  data() {
    return {
      message :{
        user_name: "XXX",
        remark: "XXX的外出申请",
        form:[
            {
                val: "私事"
            },
            {
                val: ["2020-09-23","2020-09-25"]
            },
            {
                val: "市内"
            },
            {
                val: "回家"
            },
            {
                val: "回家吃饭"
            },
        ]  
      }
    }
  },
  methods: {
    daochu(e) {
      console.log(e)
      let docxsrc = "/peopleout.docx";        //模板文件的位置
      let docxname = "工作日志.docx";        //导出文件的名字
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent(docxsrc, function(error, content) {
          // docxsrc是模板。我们在导出的时候，会根据此模板来导出对应的数据
          // 抛出异常
          if (error) {
              throw error;
          }
  
          // 创建一个PizZip实例，内容为模板的内容
          let zip = new PizZip(content);
          // 创建并加载docx templater实例对象
          let doc = new docxtemplater().loadZip(zip);
          // 设置模板变量的值
          doc.setData({
              ...e, // e中的数据可以再模板中直接使用
              cause: e.form[4].val,
              arrive: e.form[2].val,
              starttime: e.form[1].val[0],
              endtime: e.form[1].val[1]
          });
  
          try {
              // 用模板变量的值替换所有模板变量
              doc.render();
          } catch (error) {
          // 抛出异常
          let e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties
              };
          console.log(JSON.stringify({ error: e }));
          throw error;
          }
  
          // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
          let out = doc.getZip().generate({
              type: "blob",
              mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
          });
          // 将目标文件对象保存为目标类型的文件，并命名
          saveAs(out, docxname);
      });
    }
  },
}
</script>

模版文件docx 我就不粘了，网上都是例子，需要代码可以留言，最后贴两张模版和效果的图片