Vue CLI4 Vue.config.js标准配置(最全注释)


Posted in Javascript onJune 05, 2020

前言:

Vue.js CLI工具 不知不觉发展到了4.0时代,CLI给人最直白的感受是没有了build文件夹跟config文件夹,所有的配置都在Vue.config.js完成。那么该文件的配置至关重要。现在我们来看一下最新配置是怎么配置的。

安装

npm i -d vue-cli-configjs
// vue.config.js
const path = require('path');
const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩, 按需引用
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 开启gzip压缩, 按需写入
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 打包分析
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
const resolve = (dir) => path.join(__dirname, dir);
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/site/vue-demo/' : '/', // 公共路径
  indexPath: 'index.html' , // 相对于打包路径index.html的路径
  outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
  assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
  lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
  productionSourceMap: !IS_PROD, // 生产环境的 source map
  parallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建。
  pwa: {}, // 向 PWA 插件传递选项。
  chainWebpack: config => {
    config.resolve.symlinks(true); // 修复热更新失效
    // 如果使用多页面打包,使用vue inspect --plugins查看html是否在结果数组中
    config.plugin("html").tap(args => {
      // 修复 Lazy loading routes Error
      args[0].chunksSortMode = "none";
      return args;
    });
    config.resolve.alias // 添加别名
      .set('@', resolve('src'))
      .set('@assets', resolve('src/assets'))
      .set('@components', resolve('src/components'))
      .set('@views', resolve('src/views'))
      .set('@store', resolve('src/store'));
    // 压缩图片
    // 需要 npm i -D image-webpack-loader
    config.module
      .rule("images")
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({
        mozjpeg: { progressive: true, quality: 65 },
        optipng: { enabled: false },
        pngquant: { quality: [0.65, 0.9], speed: 4 },
        gifsicle: { interlaced: false },
        webp: { quality: 75 }
      });
    // 打包分析, 打包之后自动生成一个名叫report.html文件(可忽视)
    if (IS_PROD) {
      config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
        {
          analyzerMode: "static"
        }
      ]);
    }
  },
  configureWebpack: config => {
    // 开启 gzip 压缩
    // 需要 npm i -D compression-webpack-plugin
    const plugins = [];
    if (IS_PROD) {
      plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path].gz[query]",
          algorithm: "gzip",
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8
        })
      );
    }
    config.plugins = [...config.plugins, ...plugins];
  },
  css: {
    extract: IS_PROD,
    requireModuleExtension: false,// 去掉文件名中的 .module
    loaderOptions: {
        // 给 less-loader 传递 Less.js 相关选项
        less: {
          // `globalVars` 定义全局对象,可加入全局变量
          globalVars: {
            primary: '#333'
          }
        }
    }
  },
  devServer: {
      overlay: { // 让浏览器 overlay 同时显示警告和错误
       warnings: true,
       errors: true
      },
      host: "localhost",
      port: 8080, // 端口号
      https: false, // https:{type:Boolean}
      open: false, //配置自动启动浏览器
      hotOnly: true, // 热更新
      // proxy: 'http://localhost:8080'  // 配置跨域处理,只有一个代理
      proxy: { //配置多个跨域
        "/api": {
          target: "http://172.11.11.11:7071",
          changeOrigin: true,
          // ws: true,//websocket支持
          secure: false,
          pathRewrite: {
            "^/api": "/"
          }
        },
        "/api2": {
          target: "http://172.12.12.12:2018",
          changeOrigin: true,
          //ws: true,//websocket支持
          secure: false,
          pathRewrite: {
            "^/api2": "/"
          }
        },
      }
    }
}

结语

上述代码可以直接复制,也可以按需引入,一般都用的到,注意里面需要安装的依赖。

cnpm install --save-dev compression-webpack-plugin
cnpm install --save-dev image-webpack-loader

到此这篇关于Vue CLI4 Vue.config.js标准配置(最全注释)的文章就介绍到这了,更多相关Vue.config.js标准配置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!,希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
MSN消息提示类
Sep 05 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
利用vue实现模态框组件
Dec 19 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
swiper 自动图片无限轮播实现代码
May 21 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 #Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 #Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 #jQuery
详解JS函数防抖
Jun 05 #Javascript
Vuex的各个模块封装的实现
Jun 05 #Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 #Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 #Javascript
You might like
php对图像的各种处理函数代码小结
2013/07/08 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
javascript引用对象的方法
2007/01/11 Javascript
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
用Python实现读写锁的示例代码
2018/11/05 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
python链表类中获取元素实例方法
2021/02/23 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
公司活动策划方案
2014/01/13 职场文书
致垒球运动员加油稿
2014/02/16 职场文书
单位实习介绍信
2015/05/05 职场文书
个人欠条范本
2015/07/03 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
关于的python五子棋的算法
2022/05/02 Python