揭秘vue——vue-cli3全面配置

hatlonely 發布于2019-08-23 13:10 / 1643人閱讀

摘要：中可以使用注入變量訪問環境變量中的配置信息向全局樣式傳入共享的全局變量在中引用添加兼容在中添加配置完整配置持續更新中揭秘系列

√ 配置多環境變量

√ 配置基礎 vue.config.js

√ 配置 proxy 跨域

√ 修復 HMR(熱更新)失效

√ 修復 Lazy loading routes Error： Cyclic dependency

√ 添加別名alias

√ 壓縮圖片

√ 自動生成雪碧圖

√ 去除多余無效的 css

√ 添加打包分析

√ 配置 externals 引入cdn資源

√ 刪除moment語言包

√ 去掉 console.log

√ 利用splitChunks多帶帶打包第三方模塊

√ 開啟 gzip 壓縮

√ 為 sass 提供全局樣式，以及全局變量

√ 為 stylus 提供全局變量

√ 預渲染prerender-spa-plugin

√ 添加 IE 兼容

√ 文件上傳 ali oss

√ 完整依賴

創建項目 配置環境變量

??通過在package.json里的scripts配置項中添加--mode xxx來選擇不同環境

??在項目根目錄中新建.env, .env.production, .env.analyz等文件

??只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中，代碼中可以通過process.env.VUE_APP_BASE_API訪問

??NODE_ENV 和 BASE_URL 是兩個特殊變量，在代碼中始終可用

.env serve默認的環境變量

NODE_ENV = "development"
VUE_APP_BASE_API = "https://demo.cn/api"
VUE_APP_SRC = "https://wechat-timg.oss-cn-hangzhou.aliyuncs.com/demo"

.env.production build默認的環境變量

NODE_ENV = "production"

VUE_APP_BASE_API = "https://demo.com/api"
VUE_APP_SRC = "https://img-wechat.oss-cn-hangzhou.aliyuncs.com/demo"

.env.analyz 用于webpack-bundle-analyzer打包分析

NODE_ENV = "production"
IS_ANALYZ = "analyz"

VUE_APP_BASE_API = "https://demo.com/api"
VUE_APP_SRC = "https://img-wechat.oss-cn-hangzhou.aliyuncs.com/demo"

??修改package.json

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "analyz": "vue-cli-service build --mode analyz",
  "lint": "vue-cli-service lint"
}

配置vue.config.js

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

module.exports = {
  baseUrl: "./", // 默認"/"，部署應用包時的基本 URL
  outputDir: process.env.outputDir || "dist", // "dist", 生產環境構建文件的目錄
  assetsDir: "",  // 相對于outputDir的靜態資源(js、css、img、fonts)目錄
  lintOnSave: false,
  runtimeCompiler: true, // 是否使用包含運行時編譯器的 Vue 構建版本
  productionSourceMap: false,  // 生產環境的 source map
  parallel: require("os").cpus().length > 1,
  pwa: {}
};

配置proxy跨域

const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
module.exports = {
    devServer: {
        // overlay: {
        //   warnings: true,
        //   errors: true
        // },
        open: IS_PROD,
        host: "0.0.0.0",
        port: 8000,
        https: false,
        hotOnly: false,
        proxy: {
          "/api": {
            target: process.env.VUE_APP_BASE_API || "http://127.0.0.1:8080",
            changeOrigin: true
          }
        }
    }
}

修復HMR(熱更新)失效

module.exports = {
    chainWebpack: config => {
        // 修復HMR
        config.resolve.symlinks(true);
    }
}

添加別名

const path =  require("path");
const resolve = (dir) => path.join(__dirname, dir);
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);

module.exports = {
    chainWebpack: config => {
        // 添加別名
        config.resolve.alias
          .set("@", resolve("src"))
          .set("assets", resolve("src/assets"))
          .set("components", resolve("src/components"))
          .set("layout", resolve("src/layout"))
          .set("base", resolve("src/base"))
          .set("static", resolve("src/static"));
    }
}

添加打包分析

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

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

配置externals

??防止將某些 import 的包(package)打包到 bundle 中，而是在運行時(runtime)再去從外部獲取這些擴展依賴

module.exports = {
    configureWebpack: config => {
        config.externals = {
          "vue": "Vue",
          "element-ui": "ELEMENT",
          "vue-router": "VueRouter",
          "vuex": "Vuex",
          "axios": "axios"
        }
    }
}

去掉console.log

方法一：

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
    configureWebpack: config => {
        if (IS_PROD) {
            const plugins = [];
            plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            warnings: false,
                            drop_console: true,
                            drop_debugger: false,
                            pure_funcs: ["console.log"]//移除console
                        }
                    },
                    sourceMap: false,
                    parallel: true
                })
            );
            config.plugins = [
                ...config.plugins,
                ...plugins
            ];
        }
    }
}

方法二：使用babel-plugin-transform-remove-console插件

npm i --save-dev babel-plugin-transform-remove-console

在babel.config.js中配置

const plugins = [];
if(["production", "prod"].includes(process.env.NODE_ENV)) {  
  plugins.push("transform-remove-console")
}

module.exports = {
  presets: [["@vue/app",{"useBuiltIns": "entry"}]],
  plugins: plugins
};

開啟gzip壓縮

npm i --save-dev compression-webpack-plugin

const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = /.(js|css|json|txt|html|ico|svg)(?.*)?$/i;

module.exports = {
    configureWebpack: config => {
        if (IS_PROD) {
            const plugins = [];
            plugins.push(
                new CompressionWebpackPlugin({
                    filename: "[path].gz[query]",
                    algorithm: "gzip",
                    test: productionGzipExtensions,
                    threshold: 10240,
                    minRatio: 0.8
                })
            );
            config.plugins = [
                ...config.plugins,
                ...plugins
            ];
        }
    }
}

??還可以開啟比gzip體驗更好的Zopfli壓縮詳見https://webpack.js.org/plugins/compression-webpack-plugin

npm i --save-dev @gfx/zopfli brotli-webpack-plugin

const CompressionWebpackPlugin = require("compression-webpack-plugin");
const zopfli = require("@gfx/zopfli");
const BrotliPlugin = require("brotli-webpack-plugin");
const productionGzipExtensions = /.(js|css|json|txt|html|ico|svg)(?.*)?$/i;

module.exports = {
    configureWebpack: config => {
        if (IS_PROD) {
            const plugins = [];
            plugins.push(
                new CompressionWebpackPlugin({
                    algorithm(input, compressionOptions, callback) {
                      return zopfli.gzip(input, compressionOptions, callback);
                    },
                    compressionOptions: {
                      numiterations: 15
                    },
                    minRatio: 0.99,
                    test: productionGzipExtensions
                })
            );
            plugins.push(
                new BrotliPlugin({
                    test: productionGzipExtensions,
                    minRatio: 0.99
                })
            );
            config.plugins = [
                ...config.plugins,
                ...plugins
            ];
        }
    }
}

為sass提供全局樣式，以及全局變量

??可以通過在main.js中Vue.prototype.$src = process.env.VUE_APP_SRC;掛載環境變量中的配置信息，然后在js中使用$src訪問。

??css中可以使用注入sass變量訪問環境變量中的配置信息

module.exports = {
    css: {
        modules: false,
        extract: IS_PROD,
        sourceMap: false,
        loaderOptions: {
          sass: {
            // 向全局sass樣式傳入共享的全局變量
            data: `@import "~assets/scss/variables.scss";$src: "${process.env.VUE_APP_SRC}";`
          }
        }
    }
}

在scss中引用

.home {
    background: url($src + "/images/500.png");
}

添加IE兼容

npm i --save @babel/polyfill

??在main.js中添加

import "@babel/polyfill";

配置babel.config.js

const plugins = [];

module.exports = {
  presets: [["@vue/app",{"useBuiltIns": "entry"}]],
  plugins: plugins
};

完整配置 vue-cli3-config github持續更新中

???揭秘vue系列???

GPU云服務器云服務器 vue-cli3 vue-cli 大揭秘揭秘云存儲

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

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

vue學習系列（二）vue-cli

摘要：一介紹是官方提供的腳手架，用來快速建立項目。標識項目名稱，這個你可以根據自己的項目來起名字。初始化完成之后，進入安裝目錄，必須先安裝項目依賴，否則無法運行。源文件需要注意的是是入口文件，下的是路由文件，文件是組件文件。一.介紹 vue-cli是官方提供的腳手架，用來快速建立項目。二.安裝 npm install vue-cli -g//全局安裝三.初始化項目 vue init ...

baishancloud 2019-08-26 11:50 評論0 收藏0
封裝Vue組件的一些技巧

摘要：根據組件單向數據流和和事件通信機制，需要由子組件通過事件通知父組件，并在父組件中修改原始的數據，完成狀態的更新。本文同步在個人博客shymean.com上，歡迎關注寫Vue有很長一段時間了，除了常規的業務開發之外，也應該思考和反思一下封裝組件的正確方式。以彈窗組件為例，一種實現是在需要模板中引入需要彈窗展示的組件，然后通過一個flag變量來控制彈窗的組件，在業務代碼里面會充斥著冗余的彈...

韓冰 2019-05-23 17:35 評論0 收藏0
Vue 2.0 開發聊天程序（一）: 初建項目

摘要：它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。安裝和使用在之后的實踐過程中講解。有一套良好的代碼規范，對于項目的開發和維護都很友好。努力了，不一定能成功，但是不努力，感覺好舒服啊　　　　　　　　　　　　　　　　　　　——努訓沒有了解過vue1.*，直接上手vue2.0；雖然有些吃力但還是很愉快了學下來了。一丶環境配置 node.js...

荊兆峰 2019-08-21 11:25 評論0 收藏0
Vue 兼容 ie9 的全面解決方案

摘要：本文將針對使用生態開發完成的網站，以版本為基礎兼容目標，實現全功能正常使用的全面兼容解決方案。這樣做的目的，是逐步減少全局性方法，使得語言逐步模塊化。此外，使用這個，一旦頁面不處于瀏覽器的當前標簽，就會自動停止刷新。前言背景情況 vue - 2.5.11 vue-cli 使用模板 webpack-simple http請求：axios Vue 官方對于 ie 瀏覽器版本兼容情...

codeKK 2019-08-22 18:07 評論0 收藏0
Vue項目搭建、只需四步輕松搞定！

摘要：你只要算好各種食材的比例，不用關心做菜的過程，就是那個微波爐。項目搭建步驟官網官網開發環境安裝配置項目配置如圖所示運行項目開發編譯在瀏覽器輸入看到，就跑通了。從基礎開始，循序漸進，含有常用實戰項目，貼近企業真實現狀。用一個完成的Vue系列文章，讓大家全面理解Vue的實現原理，掌握實用技巧，能在實戰中使用Vue，解鎖一個開發技能。文末有文章大綱請查看。不墨跡了！馬上寫內容： 1.為什...

張巨偉 2019-08-23 16:08 評論0 收藏0