堆棧內存溢出
  簡體   English   中英

npm run build在我的vue cli項目中拋出錯誤，但npm run dev工作正常

[英]npm run build is throwing errors in my vue cli project but npm run dev works fine

 原文  2019-05-23 17:39:37  9   3    javascript/ vue.js/ webpack

問題描述

當我運行npm run build時，我得到了一堆錯誤，但是當我運行npm run dev時，它運行良好而沒有錯誤。

我嘗試將webpack.config.js公共路徑更改為./dist，但是沒有修復它。 我也試過安裝uglifyjs，但它也沒有幫助。 我不知道還有什么可以嘗試的。

這是我的webpack.config.js文件 

var path = require('path')
var webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: './dist/',
    filename: 'build.js'
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

這是我的package.json文件 

{

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.11",
    "vue-router": "^3.0.6",
    "vuex": "^3.1.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^2.1.1",
    "file-loader": "^1.1.4",
    "uglifyjs-webpack-plugin": "^2.1.3",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.3.1"
  }
}

當我運行npm run build時，它應該創建一個dist文件夾，其中包含在生產模式下運行的所有必要文件。 相反，我得到這些錯誤 


/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/cli.js:74
                                throw err;
                                ^

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
    at Object.get [as UglifyJsPlugin] (/Users/pat/Desktop/side/iread/node_modules/webpack/lib/webpack.js:185:10)
    at Object.<anonymous> (/Users/pat/Desktop/side/iread/webpack.config.js:75:26)
    at Module._compile (/Users/pat/Desktop/side/iread/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)
    at Module.require (internal/modules/cjs/loader.js:663:17)
    at require (/Users/pat/Desktop/side/iread/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/utils/convert-argv.js:115:13)
    at requireConfig (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/utils/convert-argv.js:117:6)
    at /Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/utils/convert-argv.js:124:17
    at Array.forEach (<anonymous>)
    at module.exports (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/utils/convert-argv.js:122:15)
    at yargs.parse (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/cli.js:71:45)
    at Object.parse (/Users/pat/Desktop/side/iread/node_modules/yargs/yargs.js:567:18)
    at /Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/cli.js:375:3)
    at Module._compile (internal/modules/cjs/loader.js:734:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)
    at Module.require (internal/modules/cjs/loader.js:663:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/pat/Desktop/side/iread/node_modules/webpack/bin/webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:734:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:797:12)
    at executeUserCode (internal/bootstrap/node.js:526:15)
    at startMainThreadExecution (internal/bootstrap/node.js:439:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! iread@1.0.0 build: `cross-env NODE_ENV=production webpack --progress --hide-modules`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the iread@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/pat/.npm/_logs/2019-05-23T17_34_37_411Z-debug.log
Patricks-MacBook-Pro:iread pat$ npm run build

> iread@1.0.0 build /Users/pat/Desktop/side/iread
> cross-env NODE_ENV=production webpack --progress --hide-modules

/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/cli.js:74
                                throw err;
                                ^

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
    at Object.get [as UglifyJsPlugin] (/Users/pat/Desktop/side/iread/node_modules/webpack/lib/webpack.js:185:10)
    at Object.<anonymous> (/Users/pat/Desktop/side/iread/webpack.config.js:75:26)
    at Module._compile (/Users/pat/Desktop/side/iread/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)
    at Module.require (internal/modules/cjs/loader.js:663:17)
    at require (/Users/pat/Desktop/side/iread/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/utils/convert-argv.js:115:13)
    at requireConfig (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/utils/convert-argv.js:117:6)
    at /Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/utils/convert-argv.js:124:17
    at Array.forEach (<anonymous>)
    at module.exports (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/utils/convert-argv.js:122:15)
    at yargs.parse (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/cli.js:71:45)
    at Object.parse (/Users/pat/Desktop/side/iread/node_modules/yargs/yargs.js:567:18)
    at /Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/cli.js:375:3)
    at Module._compile (internal/modules/cjs/loader.js:734:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)
    at Module.require (internal/modules/cjs/loader.js:663:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/pat/Desktop/side/iread/node_modules/webpack/bin/webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:734:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:797:12)
    at executeUserCode (internal/bootstrap/node.js:526:15)
    at startMainThreadExecution (internal/bootstrap/node.js:439:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! iread@1.0.0 build: `cross-env NODE_ENV=production webpack --progress --hide-modules`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the iread@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/pat/.npm/_logs/2019-05-23T17_34_58_975Z-debug.log

3 個解決方案

解決方案1
 0  2019-05-23 17:45:59

我猜它是因為你沒有在Dev build中使用uglifyJS依賴項，嘗試運行npm install然后再次嘗試build

編輯：檢查出來https://github.com/wuweijia/wuweijia.github.io/issues/46

解決方案2
 0  2019-05-24 10:16:29

嘗試運行以下命令

npm install uglifyjs-webpack-plugin --save

解決方案3
 0 已采納  2019-05-24 17:15:09

經過一番挖掘，我終於明白了。 在我的webpack.config.js中，我改變了 

new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),

對此 

optimization: {
    minimizer: [new UglifyJsPlugin()],
  },

問題是我在沒有刪除舊的新webpack.optimize.UglifyJsPlugin的情況下添加了最小化器。 我從他們的文檔中找到了答案

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Vue CLI npm run build 拋出語法錯誤：意外令牌 - 但代碼看起來不錯 Angular：ng構建失敗，但是npm run構建正常 無法在生產中使用vue-cli調用npm run build “npm run dev”有效，但“next dev”無效 Npm 運行構建/部署不起作用並拋出“編譯錯誤” npm install 和 npm run dev 控制台拋出錯誤后，即使項目在另一台機器上工作 &#39;npm run watch&#39; 或 &#39;dev&#39; 在我的計算機（Laravel 項目）中不再工作，錯誤：&#39;[webpack-cli] RangeError：超過最大調用堆棧大小&#39; npm run dev 不工作 在 npm run build 之前檢查 jshint 錯誤 vue.js cli 命令“npm run serve”如何工作
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM