一、遇到 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