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

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

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

√ 配置多环境变量

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

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