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

hatlonely 发布于2019-08-23 13:10 / 1641人阅读

摘要：中可以使用注入变量访问环境变量中的配置信息向全局样式传入共享的全局变量在中引用添加兼容在中添加配置完整配置持续更新中揭秘系列

√ 配置多环境变量

√ 配置基础 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系列☜☜☜

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99262.html

阿里云服务器安全知识：服务器被黑客攻击？或许这些行为你从未在意过

摘要：阿里云服务器重要设置事项篇漏洞修复主机头的设置。阿里云服务器重要设置事项篇密码不能太过简单启用防火墙阿里云服务器重要设置事项数据库篇如果有安装数据库，那么安装好后进入目录搜索然后将找到的三个文件改名或者删除。随着互联网技术的发展，技术的透明化，服务器系统漏洞百出，黑客充分利用，居多重要数据被盗，或破坏，正是如此，需要加强我们的安全意识，以防网站、系统等重要数据被盗。服务器重要设置事项（win...

stdying 2019-04-24 19:32 评论0 收藏0
vue学习系列（二）vue-cli

摘要：一介绍是官方提供的脚手架，用来快速建立项目。标识项目名称，这个你可以根据自己的项目来起名字。初始化完成之后，进入安装目录，必须先安装项目依赖，否则无法运行。源文件需要注意的是是入口文件，下的是路由文件，文件是组件文件。一.介绍 vue-cli是官方提供的脚手架，用来快速建立项目。二.安装 npm install vue-cli -g//全局安装三.初始化项目 vue init ...

baishancloud 2019-08-26 11:50 评论0 收藏0
2017双11技术揭秘—阿里数据库进入全网秒级实时监控时代

摘要：每秒实时处理超过万项监控指标，让异常无所遁形。此外，对于复杂数据库故障事后排查故障根源现场还原历史事件追踪也迫使我们建设一个覆盖线上所有环境数据库实例事件的监控系统，做到覆盖阿里全球子公司所有机房。所有性能指标做到秒级连续不间断监控。摘要： 2017双11再次创下了32.5万笔/秒交易创建的纪录，在这个数字后面，更是每秒多达几千万次的数据库写入，如何大规模进行自动化操作、保证数据库的...

jk_v1 2019-06-24 17:55 评论0 收藏0