vue-cli 解決白屏、兼容、壓縮及清除console

問題

  • 打包白屏
  • IE白屏
  • 打包后清除控制臺所有console信息
  • js\css壓縮問題

解決

問題1. 打包白屏

描述
npm run build打包后，生成dist文件夾。從該文件夾打開dist/index.html頁面，發(fā)現(xiàn)頁面空白，且控制臺報錯。原因是路徑配置有問題。
方案
根目錄打開/新建vue.config.js，配置路徑：

module.exports = {
  // 基本路徑配置
  publicPath: './'
}

重新打包驗證，問題得以解決。

問題2. IE白屏

描述
在打包完成之后，如果是pc項目，或者移動端低版本兼容項目，則會有許多問題，其中白屏問題困擾著很多開發(fā)者，在安卓4.0、IE多個版本環(huán)境中體現(xiàn)的尤為別致。
方案

  1. 下載相關插件
npm install @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise babel-polyfill --save-dev-dev
  1. 根目錄新建文件.babelrc：
{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

*[注: 基于vue-cli 3.x]*
  1. 修改根目錄下的文件babel.config.js：
// ... some other codes

// 打包時刪除console
const plugins = [];
if (['production', 'prod'].includes(process.env.NODE_ENV)) {
  plugins.push("transform-remove-console")
}

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        "useBuiltIns": "entry",
        polyfills: [
          'es6.promise',
          'es6.symbol'
        ]
      }
    ]
  ],
  
  plugins: plugins
}
  1. 創(chuàng)建/修改根目錄下的文件vue.config.js：
module.exports = {
    // 顯式轉義依賴
    transpileDependencies: ['webpack-dev-server/client'],
    
    chainWebpack: config => {
            // 指定入口  es6轉es5
            config.entry.app = ['babel-polyfill', './src/main.js'];
    }
}
  1. 入口引入相關插件src/main.js 
// 解決ie白屏問題
import '@babel/polyfill'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()
  1. 重啟服務/重新打包
    頁面正常顯示，控制臺無報錯信息。問題解決。

問題3. 打包后清除控制臺所有console信息

描述
在開發(fā)環(huán)境中，我們調試過程中會添加些許的console.log或者debugger相關代碼，來幫助我們完成開發(fā)。但是有時候此類代碼太多或者馬虎了，上線前沒有刪除干凈，那么打包后生產環(huán)境中就會在控制臺留下相關信息。那么為了避免這一不友好行為，我們采取插件來在打包時，清除所有打印信息。
方案

  1. 安裝插件
npm install uglifyjs-webpack-plugin --save-dev
  1. 配置vue.config.js 
// 去除console
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const env = process.env.NODE_ENV;

module.exports = {
    // ... other codes

    // 去除console
    configureWebpack: (config) => {
        if (env !== 'development' || env !== 'test') {

            config.plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            warnings: false,
                            drop_debugger: true, // 注釋console
                            drop_console: true,
                            pure_funcs:['console.log'] // 移除console
                        },
                    },
                    sourceMap: false,
                    parallel: true,
                }),
            );
        }
    },
}
  1. 重新打包
    配置完成后，重新打包npm run build，打開dist/index.html驗證，console全部清除。

問題4. js\css壓縮問題

描述
在打包成功后，為了縮小包體積，提高頁面響應速度，一般會對包進行壓縮，此處主要針對js\css來處理。
方案

  1. 安裝插件
npm install compression-webpack-plugin --save-dev
  1. 配置vue.config.js中的configureWebpack
// 壓縮css、js
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 要壓縮的文件
const productionGzipExtensions = ['js', 'css'];

configureWebpack: (config) => {
    if (env !== 'development' || env !== 'test') {
        config.plugins.push(new CompressionWebpackPlugin({
            algorithm: 'gzip',
            test: new RegExp(`\\.(${productionGzipExtensions.join('|')})$`),
            threshold: 10240,
            minRatio: 0.8,
        }));
    }
}
  1. 重啟服務
    完成陪之后重啟服務/重新打包，處理完成，搞定收工！

附贈

這里附上基于vue-cli3的一些簡單配置文件

vue.config.js

const path = require('path');

const resolve = dir => path.resolve(__dirname, dir);

// const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);

// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;





// 去除console
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
// 壓縮css、js
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 要壓縮的文件
const productionGzipExtensions = ['js', 'css'];
// const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;


const env = process.env.NODE_ENV;


module.exports = {
    // 基本路徑配置
    publicPath: './',

    // 顯式轉義依賴
    transpileDependencies: ['webpack-dev-server/client'],

    // 配置less
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true,
            }
        }
    },

    configureWebpack: (config) => {
        if (env !== 'development' || env !== 'test') {
            config.plugins.push(new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: new RegExp(`\\.(${productionGzipExtensions.join('|')})$`),
                threshold: 10240,
                minRatio: 0.8,
            }));
            config.plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            warnings: false,
                            drop_debugger: true, // 注釋console
                            drop_console: true,
                            pure_funcs:['console.log'] // 移除console
                        },
                    },
                    sourceMap: false,
                    parallel: true,
                }),
            );
        }
    },

    chainWebpack: config => {
        // 指定入口  es6轉es5
        config.entry.app = ['babel-polyfill', './src/main.js'];

        // 修復HMR
        config.resolve.symlinks(true);

        // //修復 Lazy loading routes Error
        // config.plugin('html').tap(args => {
        //     args[0].chunksSortMode = 'none';
        //     return args;
        // });

        // 添加別名
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets', resolve('src/assets'))
            .set('static', resolve('src/static'));

        // //壓縮圖片
        // config.module
        //     .rule("images")
        //     .use("image-webpack-loader")
        //     .loader("image-webpack-loader")
        //     .options({
        //         mozjpeg: {progressive: true, quality: 65},
        //         optipng: {enabled: false},
        //         pngquant: {quality: "65-90", speed: 4},
        //         gifsicle: {interlaced: false},
        //         webp: {quality: 75}
        //     });

        // // 打包分析
        // if (process.env.IS_ANALYZ) {
        //     config.plugin('webpack-report')
        //         .use(BundleAnalyzerPlugin, [{
        //             analyzerMode: 'static',
        //         }]);
        // }
    },

    // 是否使用包含運行時編譯器的 Vue 構建版本
    // runtimeCompiler: true,

    // 去除打包.map后綴文件
    // productionSourceMap: false,

    // devServer: {//跨域
    //     port: 8080,// 端口號
    //     open: true, //配置自動啟動瀏覽器
    //     proxy: {// 配置跨域處理 可以設置多個
    //         '/api': {
    //             target: '',
    //             ws: true,
    //             changeOrigin: true
    //         },
    //     }
    // }
}

babel.config.js

// 打包時刪除console
const plugins = [];
if (['production', 'prod'].includes(process.env.NODE_ENV)) {
  plugins.push("transform-remove-console")
}



module.exports = {
  presets: [
    [
      '@vue/app',
      {
        "useBuiltIns": "entry",
        polyfills: [
          'es6.promise',
          'es6.symbol'
        ]
      }
    ]
  ],
  // 配置babel-plugin-import, 用于按需加載組件代碼和樣式
  plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    ]
  ],

}

.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 解決ie白屏問題
import '@babel/polyfill'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()

// 使用antd-vue Button組件
import { Button } from 'ant-design-vue'

// Button組件
Vue.component(Button.name, Button);


Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • ## 框架和庫的區(qū)別?> 框架(framework):一套完整的軟件設計架構和**解決方案**。> > 庫(lib...
    Rui_bdad閱讀 3,150評論 1贊 4
  • 33、JS中的本地存儲 把一些信息存儲在當前瀏覽器指定域下的某一個地方（存儲到物理硬盤中）1、不能跨瀏覽器傳輸：在...
    萌妹撒閱讀 2,240評論 0贊 2
  • 原文http://www.cnblogs.com/libin-1/p/6596810.html 版本號 vue-c...
    tengrl閱讀 3,871評論 0贊 0
  • 本文主要介紹兩個插件：DllPlugin和DllReferencePlugin，后者配合前者使用。 Github地...
    yozosann閱讀 11,175評論 4贊 27
  • 響應式布局的理解 響應式開發(fā)目的是一套代碼可以在多種終端運行,適應不同屏幕的大小,其原理是運用媒體查詢,在不同屏幕...
    懶貓_6500閱讀 854評論 0贊 0

友情鏈接更多精彩內容