随笔- 113 文章- 0 评论- 24 阅读- 35万

vue-cli3+中vue.config.js相关配置

1.目录结构

├── README.md           # 说明
|-- dist                        # 打包后文件夹
├── babel.config.js         # babel语法编译
├── package-lock.json 
├── public          # 静态文件夹,这类资源将会直接被拷贝，而不会经过 webpack 的处理。
│   ├── favicon.ico
│   └── index.html      #入口页面
└── src             # 源码目录
    ├── App.vue - 页面
    ├── assets  - 静态目录,这类引用会被 webpack 处理。
    │   └── logo.png
    ├── components 组件
    │   └── HelloWorld.vue
    └── main.js                  # 入口文件，加载公共组件
│—— vue.config.js                # 配置文件，需自行配置 
│—— .gitignore               # git忽略上传的文件格式   
│—— babel.config.js          # babel语法编译                        
│—— package.json                 # 项目基本信息 
│—— .env                         # 环境变量和模式，需自行配置 
│—— .eslintrc.js             # ES-lint校验                  

2 vue.config.js 配置

Vue-cli3+ 和 Vue-cli2 的最大区别：在于内置了很多配置，没有 build 文件夹和 config 的配置。但是在开发中，避免不了的还是需要个性化的配置，这里系统讲一下 vue.config.js 的配置。

基础版

module.exports = {
  publicPath: './',  // 基本路径
  outputDir: 'dist', // 构建时的输出目录
  assetsDir: 'static', // 放置静态资源的目录
  indexPath: 'index.html', // html 的输出路径
  filenameHashing: true, // 文件名哈希值
  lintOnSave: false, // 是否在保存的时候使用 `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://127.0.0.1:10001',
        changeOrigin: true, // 是否跨域
        ws: false, // 是否支持 websocket
        secure: false, // 如果是 https 接口，需要配置这个参数
        pathRewrite: { // 可以理解为一个重定向或者重新赋值的功能
          '^/api': ''    // '^/api': '/'    这种接口配置出来     http://127.0.0.1:10001/login
        }               // '^/api': '/api'  这种接口配置出来     http://127.0.0.1:10001/api/login
      }
    }
  }
}

高级版及部分Webpack插件介绍

// vue.config.js
const path = require('path');
const resolve = (dir) => path.join(__dirname, dir);

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_PRODUCTION = ['production', 'prod'].includes(process.env.NODE_ENV); //判断是否是生产环境
/** 正式配置项，以下参数 都是可选**/
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 代码，false不需要
  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
  productionSourceMap: !IS_PRODUCTION, // 生产环境的 source map,
  // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
  parallel: require("os").cpus().length > 1, 
  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_PRODUCTION) {
      config.plugin("webpack-report").use(BundleAnalyzerPlugin, [{
        analyzerMode: "static"
      }]);
    }
  },
  //webpack的配置项
  configureWebpack: config => {
    // 开启 gzip 压缩
    // 需要 npm i -D compression-webpack-plugin
    const plugins = [];
    if (IS_PRODUCTION) {
      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_PRODUCTION,
    requireModuleExtension: false, // 去掉文件名中的 .module
    loaderOptions: {
      // 给 less-loader 传递 Less.js 相关选项
      less: {
        // `globalVars` 定义全局对象，可加入全局变量
        globalVars: {
          primary: '#333'
        }
      }
    }
  },
  // 配置 webpack-dev-server 行为
  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://197.0.0.1:8088",
        changeOrigin: true,
        ws: true, //websocket支持
        secure: false,
        pathRewrite: {
          "^/api": "/"
        }
      },
      "/api2": {
        target: "http://197.0.0.2:8088",
        changeOrigin: true,
        //ws: true,//websocket支持
        secure: false,
        pathRewrite: {
          "^/api2": "/"
        }
      },
    }
  }
}