vue cli 3.x 生產環境去除console采坑記

kgbook 發布于2019-08-23 17:20 / 3503人閱讀

摘要：移除總結使用插件配置如下移除沒成功報錯如下配置參考優化實踐刪除和配置最終還是沒有成功，報錯如下使用插件安裝依賴庫配置如下生產環境移除總結該方案成功了

vue-cli 3.x 移除console總結 使用 uglifyjs-webpack-plugin 插件

配置如下:

// vue.config.js
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
module.exports = {
    configureWebpack: {
        optimization: {
          minimizer: [
            new UglifyJsPlugin({
              uglifyOptions: {
                compress: {
                  warnings: false,
                  drop_console: true,//console
                  drop_debugger: false,
                  pure_funcs: ["console.log"]//移除console
                }
              }
            })
          ]
        }
  },
}

沒成功報錯如下

$ vue-cli-service build

?  Building for production...

 ERROR  Failed to compile with 5 errors                                                                                                                                                                                     11:19:57 AM

 error  

static/js/app.2cd76486.js from UglifyJs
Unexpected token: punc ?(? [static/js/app.2cd76486.js:1,23125]

 error  

static/js/chunk-66db1624.14c7d3b2.js from UglifyJs
Unexpected token: punc ?(? [static/js/chunk-66db1624.14c7d3b2.js:1,733956]

 error  

static/js/exception_403.5d780122.js from UglifyJs
Unexpected token: punc ?(? [static/js/exception_403.5d780122.js:1,281]

 error  

static/js/exception_404.3457fc52.js from UglifyJs
Unexpected token: punc ?(? [static/js/exception_404.3457fc52.js:1,281]

 error  

static/js/exception_500.94c7c527.js from UglifyJs
Unexpected token: punc ?(? [static/js/exception_500.94c7c527.js:1,283]

 ERROR  Build failed with errors.
error Command failed with exit code 1.

配置optimization.minimizer

參考 vuecli3+webpack4優化實踐（刪除console.log和配置dllPlugin）

// vue.config.js
module.exports = {
    chainWebpack: (config) => {
        if (process.env.NODE_ENV === "production") {
          config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
          config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
          config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
          config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ["console.log"]
        }
    }
}

最終還是沒有成功，報錯如下：

$ vue-cli-service build

?  Building for production... ERROR  TypeError: Cannot read property "options" of undefined
TypeError: Cannot read property "options" of undefined

使用babel-plugin-transform-remove-console插件

安裝依賴庫

$ npm install babel-plugin-transform-remove-console --save-dev
# or
$  yarn add babel-plugin-transform-remove-console --dev

【babel.config.js】配置如下

const plugins = ["@vue/babel-plugin-transform-vue-jsx"]
// 生產環境移除console
if(process.env.NODE_ENV === "production") {
  plugins.push("transform-remove-console")
}
module.exports = {
  plugins: plugins,
  presets: [
    [
      "@vue/app", {
        modules: false,
        targets: {
          browsers: ["> 1%", "last 2 versions", "not ie <= 8", "Android >= 4", "iOS >= 8"]
        },
        useBuiltIns: "entry",
      }
    ]
  ]
}

總結該方案成功了

云服務器 GPU云服務器采坑記 vue-cli vue-cli3 生產環境測試環境

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104183.html

vue-cli3.x 新特性及踩坑記

摘要：前言都到了，所以是時候玩轉一下的新特性了。安裝的包名稱由改成了。方法一原因的配置改變了，導致正確的不能用。打開終端，切換到根路徑文件里面修改為方法二是默認路徑修改了路徑會出現錯誤。按上面的方法修改完，再全局卸載果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....

xiaoqibTn 2019-08-23 12:01 評論0 收藏0
vue-cli 3.x 移除console總結

摘要：網上找了很多的配置，很多已經不適用了，把采坑的經歷記錄下來，供參考。一使用插件配置如下移除沒成功報錯如下二配置參考優化實踐刪除和配置最終還是沒有成功，報錯如下三使用插件參考安裝依賴庫配置如下生產環境移除總結該方案成功了網上找了很多vue-cli 3.x的配置，很多已經不適用了，把采坑的經歷記錄下來，供參考。一、使用 uglifyjs-webpack-plugin 插件配置如下: ...

jsbintask 2019-08-23 17:20 評論0 收藏0
Vue + TypeScript + Element 項目實踐(簡潔時尚博客網站)及踩坑記

摘要：前言本文講解如何在項目中使用來搭建并開發項目，并在此過程中踩過的坑。具有類型系統，且是的超集，在年勢頭迅猛，可謂遍地開花。年將會更加普及，能夠熟練掌握，并使用開發過項目，將更加成為前端開發者的優勢。 showImg(https://segmentfault.com/img/remote/1460000018720573); 前言本文講解如何在 Vue 項目中使用 TypeScript...

luckyyulin 2019-08-26 13:39 評論0 收藏0
vue-cli +webpack+vue-router 踩坑記

摘要：其中定義了一些命令，還記得我們初始化項目完成后執行其實就是執行簡單的來說是運行時依賴生產環境，是開發時的依賴開發環境相應的在安裝包時，有兩種命令參數可以把它們的信息寫入文件，會把依賴包名稱添加到文件鍵下，則添加到文件鍵下。這次主要是記錄下自己在做vue-cli +webpack +vue-router 的經歷以及一些踩過的坑，算是做一個簡單的總結一.vue的基本介紹 1）漸進式的...

OpenDigg 2019-08-21 17:51 評論0 收藏0