解決vue打包報錯UglifyJs

  • 2019 年 12 月 30 日
  • 筆記

報錯

ERROR in js/xxxxxx.js from UglifyJs  Unexpected token: name «Dom7», expected: punc «;» [js/chunk-3068

產生

在vue配置中，由於各插件版本兼容性差異可能會引發此問題的產生。 UglifyJs是一款可以解析、混淆、壓縮JS的工具，此處的UglifyJs是配置在腳手架/webpack中，運行在node環境中的小插件。關於UglifyJs：

  1. uglify-js@3具有簡化的API和CLI，該API和CLI與不能向後兼容uglify-js@2。
  2. UglifyJS 2.x版本的文檔可以在這裡找到。
  3. glify-js 僅支援JavaScript（ECMAScript 5）。
  4. 要縮小ECMAScript 2015或更高版本，請使用Babel之類的工具進行翻譯。

解決

低版本：

  • 原因：UglifyJs不支援ES6語法，因此報錯。
  • 解決方案：項目根目錄下創建文件 .babelrc，配置如下
{      "pressets": ["es2015"]  }

高版本：

  • 原因1：UglifyJs版本過低
  • 解決方案：升級UglifyJs版本
npm install uglify-js -g
  • 原因2: babel 轉譯問題
  • 解決方案：找到babel的配置項 transpileDependencies，如下操作：
// 舊  transpileDependencies: [  /* string or regex */  ],    // 改為如下⬇️    // 新  transpileDependencies: [      'vue-particles',      'animejs'  ],

重新打包

npm run build，完畢。

附

[email protected] vue.config.js配置混淆壓縮代js及去除console(缺少的插件先安裝上)

// 去除console  const UglifyJsPlugin = require('uglifyjs-webpack-plugin');    // 壓縮css、js  const CompressionWebpackPlugin = require('compression-webpack-plugin');    // 要壓縮的文件  const productionGzipExtensions = ['js', 'css'];      module.exports = {      // something else codes        configureWebpack: (config) => {          // 如果不是開發環境          if (env !== 'development') {              // 程式碼壓縮              config.plugins.push(new CompressionWebpackPlugin({                  algorithm: 'gzip',                  test: new RegExp(`\.(${productionGzipExtensions.join('|')})$`),                  threshold: 10240,                  minRatio: 0.8,              }));                // 打包後清除斷點和控制台列印              config.plugins.push(                  new UglifyJsPlugin({                      uglifyOptions: {                          compress: {                              drop_debugger: true, // 注釋debugger                              drop_console: true, // 注釋console                              pure_funcs:['console.log'] // 移除console                          },                      },                      sourceMap: false,   // 去除打包後生成的.map文件                      parallel: true,                  }),                );          }      },  }

希望能夠解決您的問題。

Tags:

VirMach 便宜 VPS