改了好久，人都改傻了，我是用的node：14.21.3，vue：2.5.2，webpack": "^3.12.0"
还好最后成功了，不然还准备要升级webpack版本试试，但/deep/换成::v-deep,人要死，样式都不行了，要一个个改
//主要这几个部分
"node-sass": "^4.12.1", //去掉
"sass": "^1.23.7", // 新增
"vue-loader": "^13.3.0", // 去掉，因为版本太低，导致js栈内存不足，会出现编译构建卡死，最后报如下错误
"vue-loader": "^13.7.3", // 新增
/** 13 verbose stack Exit status 134
13 verbose stack at EventEmitter.<anonymous> (D:\nvm\v14.21.3\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:400:28)
13 verbose stack at ChildProcess.<anonymous> (D:\nvm\v14.21.3\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:400:28)
13 verbose stack at maybeClose (internal/child_process.js:1088:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:296:5)
14 verbose pkgid [email protected]
15 verbose cwd D:\kayiProject\hidos-ris-web
16 verbose Windows_NT 10.0.19045 */
// 搜索结果它会说js栈内存不足，建议扩大node内存
// 它推荐node --max-old-space-size=4096，还要修改全部node_modules下的.bin文件夹下的/cmd文件修改"%_prog%"，去掉双引号%_prog%
// 这方案看着就不靠谱，但为了项目，我忍了，为此还写了一个node脚本来执行
// 然而效果并不理想，还是不行
// 后来发现是vue-loader版本问题，特地试了好几个
// 最后找到"vue-loader": "^13.7.3" ，这个可以修改前package.json
{
"name": "ky-vueui",
"version": "1.0.6611799992828",
"description": "A Vue.js project",
"author": "YEZQ <[email protected]>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build-dev": "npm run version && node build/build.js",
"build-deploy": "npm run build && node build/deploy.js",
"version": "node build/updateVersion.js",
"dll": "webpack -p --progress --config build/webpack.dll.conf.js",
"lint": "eslint --ext .js --ext .jsx --ext .vue src/",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/",
"test": "jest --config test/unit/jest.conf.js"
},
"dependencies": {
"@babel/runtime": "^7.15.3",
"@tinymce/tinymce-vue": "^3.2.8",
"awe-dnd": "^0.3.4",
"axios": "^0.19.2",
"babel-polyfill": "^6.26.0",
"crypto-js": "^4.0.0",
"diff": "^5.1.0",
"dingtalk-jsapi": "^2.12.2",
"element-ui": "^2.15.6",
"eventsource": "^2.0.2",
"file-saver": "^2.0.5",
"font-awesome": "^4.7.0",
"html2canvas": "^1.4.1",
"jquery": "^3.7.1",
"js-cookie": "^2.2.1",
"jspdf": "^2.5.2",
"jspdf-autotable": "^3.8.4",
"normalize.css": "^8.0.1",
"path-to-regexp": "^6.2.2",
"pdfjs-dist": "^2.5.207",
"qrcode": "^1.4.4",
"qrcodejs2": "0.0.2",
"sm-crypto": "^0.3.13",
"sortablejs": "^1.10.2",
"spark-md5": "^3.0.2",
"svg-sprite-loader": "^4.2.1",
"svgo": "^1.3.2",
"tinymce": "^5.1.0",
"v-runtime-template": "^1.10.0",
"vue": "^2.5.2",
"vue-cropper": "^0.5.6",
"vue-hot-reload-api": "^2.3.4",
"vue-router": "^3.0.1",
"vue-simple-uploader": "^0.7.4",
"vue-slicksort": "^1.1.3",
"vue-splitpane": "^1.0.6",
"vue-visibility-change": "^1.2.1",
"vuedraggable": "^2.23.2",
"vuex": "^3.1.3",
"ws": "^8.17.0",
"xlsx": "^0.18.5"
},
"devDependencies": {
"@vue/test-utils": "^1.2.2",
"autoprefixer": "^7.1.2",
"babel-core": "6.22.1",
"babel-eslint": "7.2.3",
"babel-helper-vue-jsx-merge-props": "2.0.3",
"babel-jest": "^23.6.0",
"babel-loader": "7.1.1",
"babel-plugin-dynamic-import-node": "1.2.0",
"babel-plugin-syntax-jsx": "6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
"babel-plugin-transform-runtime": "6.22.0",
"babel-plugin-transform-vue-jsx": "3.5.0",
"babel-preset-env": "1.3.2",
"babel-preset-stage-2": "6.22.0",
"chalk": "^2.0.1",
"compressing": "^1.9.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^14.1.0",
"eslint-config-kayieslint": "^0.1.1",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^4.0.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-template": "^0.7.0",
"eslint-plugin-vue": "^6.2.2",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^23.6.0",
"node-notifier": "^5.1.2",
"node-sass": "^4.12.1",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"sass-loader": "^7.3.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"ssh2": "^0.6.2",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-jest": "^3.0.0",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^2.11.5",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}修改后
{
"name": "ky-vueui",
"version": "1.0.6611799992828",
"description": "A Vue.js project",
"author": "YEZQ <[email protected]>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build-dev": "npm run version && node build/build.js",
"build-deploy": "npm run build && node build/deploy.js",
"version": "node build/updateVersion.js",
"dll": "webpack -p --progress --config build/webpack.dll.conf.js",
"lint": "eslint --ext .js --ext .jsx --ext .vue src/",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/",
"test": "jest --config test/unit/jest.conf.js"
},
"dependencies": {
"@babel/runtime": "^7.15.3",
"@tinymce/tinymce-vue": "^3.2.8",
"awe-dnd": "^0.3.4",
"axios": "^0.19.2",
"babel-polyfill": "^6.26.0",
"crypto-js": "^4.0.0",
"diff": "^5.1.0",
"dingtalk-jsapi": "^2.12.2",
"element-ui": "^2.15.6",
"eventsource": "^2.0.2",
"file-saver": "^2.0.5",
"font-awesome": "^4.7.0",
"html2canvas": "^1.4.1",
"jquery": "^3.7.1",
"js-cookie": "^2.2.1",
"jspdf": "^2.5.2",
"jspdf-autotable": "^3.8.4",
"normalize.css": "^8.0.1",
"path-to-regexp": "^6.2.2",
"pdfjs-dist": "^2.5.207",
"qrcode": "^1.4.4",
"qrcodejs2": "0.0.2",
"sm-crypto": "^0.3.13",
"sortablejs": "^1.10.2",
"spark-md5": "^3.0.2",
"style-loader": "^4.0.0",
"svg-sprite-loader": "^4.2.1",
"svgo": "^1.3.2",
"tinymce": "^5.1.0",
"v-runtime-template": "^1.10.0",
"vue": "^2.5.2",
"vue-cropper": "^0.5.6",
"vue-hot-reload-api": "^2.3.4",
"vue-router": "^3.0.1",
"vue-simple-uploader": "^0.7.4",
"vue-slicksort": "^1.1.3",
"vue-splitpane": "^1.0.6",
"vue-visibility-change": "^1.2.1",
"vuedraggable": "^2.23.2",
"vuex": "^3.1.3",
"ws": "^8.17.0",
"xlsx": "^0.18.5"
},
"devDependencies": {
"@vue/test-utils": "^1.2.2",
"autoprefixer": "^7.1.2",
"babel-core": "6.22.1",
"babel-eslint": "7.2.3",
"babel-helper-vue-jsx-merge-props": "2.0.3",
"babel-jest": "^23.6.0",
"babel-loader": "7.1.1",
"babel-plugin-dynamic-import-node": "1.2.0",
"babel-plugin-syntax-jsx": "6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
"babel-plugin-transform-runtime": "6.22.0",
"babel-plugin-transform-vue-jsx": "3.5.0",
"babel-preset-env": "1.3.2",
"babel-preset-stage-2": "6.22.0",
"chalk": "^2.0.1",
"compressing": "^1.9.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^14.1.0",
"eslint-config-kayieslint": "^0.1.1",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^4.0.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-template": "^0.7.0",
"eslint-plugin-vue": "^6.2.2",
"extract-text-webpack-plugin": "^3.0.0",
"fibers": "^5.0.3",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^23.6.0",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"sass": "^1.23.7",
"sass-loader": "^7.3.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"ssh2": "^0.6.2",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-jest": "^3.0.0",
"vue-loader": "^13.7.3",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^2.11.5",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}webpack配置增加sass的配置
{
test: /\.(scss|sass)$/,
exclude: /node_modules|\.js$/, // 排除 node_modules 和所有 JS 文件
use: [
'vue-style-loader',
'css-loader',
{
loader: 'postcss-loader', // 新增 PostCSS 处理层
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
implementation: require('sass'), // 使用 Dart Sass
sassOptions: {
fiber: false // Node.js 16+ 无需此配置
},
// fiber: require('fibers'), // 安装 fibers 后启用
// sassOptions: { outputStyle: 'expanded',indentedSyntax: false }, // 添加输出格式
// sourceMap: false, // 关闭 Source Map
additionalData: async (content, loaderContext) => {
return content.replaceAll('/deep/', '::v-deep');
},
}
}
],
},