vue-cli4的配置vue.config.js

一、配置多环境变量

    1、package.json 里的 scripts 配置项中添加--mode xxx 来选择不同环境

"scripts": {
        "dev": "vue-cli-service serve",
        "build:prod": "vue-cli-service build --mode production",
        "build:stage": "vue-cli-service build --mode staging",
}

2、在项目根目录中新建.env.development, .env.production, .env.staging 三个文件

 

3、三个文件说明

•  .env.development   开发环境
• .env.staging  测试环境
• .env.production   生产环境

ENV = 'development'
VUE_APP_API = 'http://localhost:8080'

4、文件中引用变量

process.env.VUE_APP_API

二、vue.config.js基础配置

'use strict'
module.exports = {
    publicPath: './',  //基本路径
    outputDir: 'dist', //构建时的输出目录
    assetsDir: 'static',//放置静态资源的目录
    indexPath: 'index.html',//html 的输出路径
    filenameHashing: true,//文件名哈希值
    lintOnSave: true,//是否在保存的时候使用 `eslint-loader` 进行检查。

    //组件是如何被渲染到页面中的？ （ast：抽象语法树；vDom：虚拟DOM）
    //template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
    //runtime-only：将template在打包的时候，就已经编译为render函数
    //runtime-compiler：在运行的时候才去编译template
    runtimeCompiler: false,
    
    transpileDependencies: [],//babel-loader 默认会跳过 node_modules 依赖。
    productionSourceMap: false,//是否为生产环境构建生成 source map？

    //调整内部的 webpack 配置
    configureWebpack:: () => {},

    chainWebpack: () => {},

    // 配置 webpack-dev-server 行为。
    devServer: {
        open: true, //编译后默认打开浏览器
        host: '0.0.0.0',  //域名
        port: 8080,  // 端口
        https: false,  //是否https
        //显示警告和错误
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            '/api': {
                target: 'http://asoyy.xyz',
                changeOrigin: true, //是否跨域
                ws: false, //是否支持websocket
                secure: false, //如果是https接口，需要配置这个参数
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

三、添加别名alias

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

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set("vue$", "vue/dist/vue.esm.js")
      .set("@", resolve("src"))
      .set("@assets", resolve("src/assets"))
      .set("@components", resolve("src/components"))
      .set("@views", resolve("src/views"))
      .set("@router", resolve("src/router"))
      .set("@store", resolve("src/store"));
  }
};

四、配置雪碧图插件

1、安装依赖

npm i -D webpack-spritesmith

2、在vue.config.js中添加配置

const path = require('path');
 
const SpritesmithPlugin = require('webpack-spritesmith');

const templateFunction = function(data) {
  var shared = ".icon { display: inline-block; vertical-align: middle; background-image: url(I) }".replace(
    "I",
    data.sprites[0].image
  );

  var perSprite = data.sprites
    .map(function(sprite) {
      return ".icon-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }"
        .replace("N", sprite.name)
        .replace("W", sprite.width)
        .replace("H", sprite.height)
        .replace("X", sprite.offset_x)
        .replace("Y", sprite.offset_y);
    })
    .join("\n");

  return shared + "\n" + perSprite;
};

module.exports = {
  chainWebpack: config => {
    // 将小图标拼接成雪碧图
    config.plugin("webpack-spritesmith").use(Spritesmith, [
      {
        src: {
          cwd: "./src/assets/images/icon/",
          glob: "*.png"
        },
        target: {
          image: "./src/assets/images/sprite/sprite.png",
          css: [
            [
              path.resolve(__dirname, "./src/assets/scss/icon/_sprite.scss"),
              {
                // 引用自己的模板
                format: "function_based_template"
              }
            ]
          ]
        },
        apiOptions: {
          cssImageRef: "../../images/sprite/sprite.png"
        },
        customTemplates: {
          function_based_template: templateFunction
        },
        spritesmithOptions: {
          algorithm: "binary-tree",
          padding: 10
        }
      }
    ]);
  }
}

3、部分配置参数说明

• src 配置创建雪碧图的源文件

– cwd 要创建雪碧图的源文件夹
– glob 要创建雪碧图的源文件类型

• target 配置生成的雪碧图文件

– img 生成的雪碧图路径和文件名
– css 引用生成的雪碧图的样式文件的路径和模板等配置

• apiOptions 可选，配置引用生成的雪碧图的一些细节

 – cssImageRef 配置在样式文件中引用雪碧图的路径

customTemplates 可选，配置生成样式文件的样式模板

spritesmithOptions 可选， spritesmith的配置。

   – algorithm 配置生成雪碧图的算法。比如设为“binary-tree”，则雪碧图看起来正正方方，还可以设为top-down、left-right、diagonal、alt-diagonal，不同值之间拼接小图标的方式不同，因此最终的雪碧图形状不同。
   – padding 配置雪碧图中小图标之间的间距，可根据需要设置。

 

五、去除多余的CSS样式

谨慎使用，或者建议不要使用，容易造成样式丢失

1、安装依赖 purgecss-webpack-plugin

npm i --save-dev glob-all purgecss-webpack-plugin path

2、在vue.config.js中配置

const path = require("path");
const PurgecssPlugin = require("purgecss-webpack-plugin");
const glob = require("glob-all");


configureWebpack: {
    plugins: [
      new PurgecssPlugin({
        paths: glob.sync([
          path.join(__dirname, "./src/index.html"),
          path.join(__dirname, "./**/*.vue"),
          path.join(__dirname, "./src/**/*.js")
        ])
      })
    ]
  },

六、去除console.log

1、安装依赖 babel-plugin-transform-remove-console

npm i -D babel-plugin-transform-remove-console

2、在babel.config.js 中配置

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

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins
};

七、使用splitChunks 单独打包第三方模块

module.exports = {
  configureWebpack: config => {
    if ('production' === process.env.NODE_ENV) {
      config.optimization = {
        splitChunks: {
          cacheGroups: {
            common: {
              name: "chunk-common",
              chunks: "initial",
              minChunks: 2,
              maxInitialRequests: 5,
              minSize: 0,
              priority: 1,
              reuseExistingChunk: true,
              enforce: true
            },
            vendors: {
              name: "chunk-vendors",
              test: /[\\/]node_modules[\\/]/,
              chunks: "initial",
              priority: 2,
              reuseExistingChunk: true,
              enforce: true
            },
            elementUI: {
              name: "chunk-elementui",
              test: /[\\/]node_modules[\\/]element-ui[\\/]/,
              chunks: "all",
              priority: 3,
              reuseExistingChunk: true,
              enforce: true
            }
          }
        }
      };
    }
  },
  chainWebpack: config => {
    if ('production' === process.env.NODE_ENV) {
      config.optimization.delete("splitChunks");
    }
    return config;
  }
};

八、开启GZIP压缩

参考https://blog.csdn.net/baidu_30891377/article/details/106567599

九、配置scss全局变量

1、assets/scss 目录下创建 _variable.scss样式文件

2、在vue.config.js中添加配置

module.exports = {
   css: {
     loaderOptions: {
        sass: {
        prependData:`@import "./src/assets/scss/_variable";`   
            }
        }
    }
}