【发布时间】：2019-12-09 04:36:35
【问题描述】：
我的 Vuejs 应用程序在 dev localhost 中成功运行，但是一旦我运行构建命令，我就会遇到这些难以调试的错误。我上周成功部署了它。
我假设我的 package.json 文件不包含正确的依赖项，所以我从成功的构建中复制了该文件，删除了我的 node_modules 文件夹并重新安装——不行。
我的 Package.json
{
"name": "client",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "-----------------",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.19",
"@fortawesome/free-brands-svg-icons": "^5.9.0",
"@fortawesome/free-solid-svg-icons": "^5.9.0",
"@fortawesome/vue-fontawesome": "^0.1.6",
"axios": "^0.18.0",
"eslint-plugin-vue": "^5.2.2",
"tiptap": "^1.14.0",
"tiptap-extensions": "^1.14.0",
"vue": "^2.5.2",
"vue-headful": "^2.0.1",
"vue-infinite-scroll": "^2.0.2",
"vue-router": "^3.0.1",
"vuetify": "^1.5.1",
"vuex": "^3.1.0",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.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",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"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",
"material-design-icons-iconfont": "^4.0.4",
"node-notifier": "^5.1.2",
"node-sass": "^4.11.0",
"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.1.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^1.1.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-svg-loader": "^0.12.0",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^2.9.7",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
错误信息
building for production...Error processing file: static/css/app.61609d17f4630a9d62a16c4312c20c20.css
(node:23459) UnhandledPromiseRejectionWarning: CssSyntaxError: /Users/jon/Documents/Personal Projects/tmp/blog-site/client/static/css/app.61609d17f4630a9d62a16c4312c20c20.css:536:5: Unknown word
at Input.error (/Users/jon/Documents/Personal Projects/tmp/blog-site/client/node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib/input.js:130:16)
at Parser.unknownWord (/Users/jon/Documents/Personal Projects/tmp/blog-site/client/node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib/parser.js:563:22)
at Parser.decl (/Users/jon/Documents/Personal Projects/tmp/blog-site/client/node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib/parser.js:235:16)
at Parser.other (/Users/jon/Documents/Personal Projects/tmp/blog-site/client/node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib/parser.js:133:18)
at Parser.parse (/Users/jon/Documents/Personal Projects/tmp/blog-site/client/node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib/parser.js:77:16)
at parse (/Users/jon/Documents/Personal Projects/tmp/blog-site/client/node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib/parse.js:17:12)
at new LazyResult (/Users/jon/Documents/Personal Projects/tmp/blog-site/client/node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib/lazy-result.js:60:16)
at Processor.<anonymous> (/Users/jon/Documents/Personal Projects/tmp/blog-site/client/node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib/processor.js:138:12)
at Processor.process (/Users/jon/Documents/Personal Projects/tmp/blog-site/client/node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib/processor.js:117:23)
at Function.creator.process (/Users/jon/Documents/Personal Projects/tmp/blog-site/client/node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib/postcss.js:148:43)
at OptimizeCssAssetsPlugin.processCss (/Users/jon/Documents/Personal Projects/tmp/blog-site/client/node_modules/optimize-css-assets-webpack-plugin/index.js:63:19)
at Object.processor (/Users/jon/Documents/Personal Projects/tmp/blog-site/client/node_modules/optimize-css-assets-webpack-plugin/index.js:29:23)
at /Users/jon/Documents/Personal Projects/tmp/blog-site/client/node_modules/last-call-webpack-plugin/index.js:139:8
at arrayEach (/Users/jon/Documents/Personal Projects/tmp/blog-site/client/node_modules/lodash/_arrayEach.js:15:9)
at forEach (/Users/jon/Documents/Personal Projects/tmp/blog-site/client/node_modules/lodash/forEach.js:38:10)
at LastCallWebpackPlugin.process (/Users/jon/Documents/Personal Projects/tmp/blog-site/client/node_modules/last-call-webpack-plugin/index.js:136:3)
(node:23459) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:23459) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
【问题讨论】：
-
您在产品构建时遇到 CSS 错误。确保在 dev 和 prod 上使用完全相同的模块和插件，并具有相同的设置（参考解析 CSS）。您还可以测试卸载 CSS 相关包（即：
"optimize-css-assets-webpack-plugin"）。 -
好的，感谢您的帮助。将 prod 与 dev 进行比较
-
解决这个问题的另一种方法是直接查看
client/static/css/app.61609d17f4630a9d62a16c4312c20c20.css的536并找出CSS 错误并修复它。
标签： vue.js webpack dependencies production