vue导出excel使用xlsx、file-saver、xlsx-style、yxg-xlsx-style 遇到的坑

一、遇到 Error: Can‘t resolve ‘fs’ in

解决方法：
在webpack.config.js中的配置中添加：

externals: {
	fs: require('fs')
 }

'
运行
运行

二、遇到 Module not found: Error: Can’t resolve ‘crypto’错误
原因是由于在webpack5中移除了nodejs核心模块的polyfill自动引入，所以需要手动引入
解决方案：
1.在package.json文件中的”dependencies”添加“node-polyfill-webpack-plugin”

npm install node-polyfill-webpack-plugin

2…在vue.config.js中添加

//头部引用
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

//加入
configureWebpack: { 
    plugins: [new NodePolyfillPlugin()]
}

三、遇到 “export ‘default‘ (imported as ‘XLSX‘) was not found in ‘xlsx‘
原因：版本未对应

 "file-saver": "^2.0.2",
 "xlsx": "^0.15.1",
 "xlsx-style": "^0.8.13",
 "yxg-xlsx-style": "^0.0.1"

完整的 vue.config.js 如下

const { defineConfig } = require('@vue/cli-service')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
module.exports = defineConfig({
  transpileDependencies: true,

  configureWebpack: {
    externals: {
      fs: require('fs')
     },
    plugins: [new NodePolyfillPlugin()]
  }
})

完整的 package.json 如下

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "element-ui": "^2.15.10",
    "file-saver": "^2.0.2",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "sm-crypto": "^0.3.11",
    "vue": "^2.6.14",
    "xlsx": "^0.16.0",
    "xlsx-style": "^0.8.13",
    "yxg-xlsx-style": "^0.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "script-loader": "^0.7.2",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

yxg-xlsx-style 配置样式可以参考 https://github.com/yinxingen/yxg-xlsx-style