vue -- vue.config.js笔记

最新推荐文章于 2024-05-14 11:43:24 发布

原创最新推荐文章于 2024-05-14 11:43:24 发布 · 628 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

web前端同时被 2 个专栏收录

30 篇文章

订阅专栏

vue.js

11 篇文章

订阅专栏

本文详细解析了vue.config.js配置文件的各个字段含义及用法，包括公共路径、输出目录、静态资源目录等核心配置项，并介绍了如何利用这些配置优化Vue项目。

vue.config.js

vue.config.js中的各个字段含义

其他同类配置文件

vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

"use strict";
const path = require("path");
const webpack = require("webpack");
const defaultSettings = require("./src/settings.js");

function resolve(dir) {
  return path.join(__dirname, dir);
}

const name = defaultSettings.title || "运营系统"; // page title
// const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 项目数据分析
const CompressionWebpackPlugin = require("compression-webpack-plugin"); //gzip压缩

const port = process.env.port || process.env.npm_config_port || 9527; // dev 端口

// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
  publicPath: "/",
  outputDir: "operationDist",
  assetsDir: "static",
  lintOnSave: process.env.NODE_ENV !== "production",
  productionSourceMap: false,
  devServer: {
    port: port,
    open: false,
    https: false,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: `http://10.20.34.63:10088`, // 测试环境
        // target: `https://***`, // 正式环境
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: ""
        }
      }
    }
  },
  configureWebpack: config => {
    let plugins = [
      new CompressionWebpackPlugin({
        threshold: 10240,
        test: /\.(js|css|svg|woff|ttf|json|html)$/
      })
      // new BundleAnalyzerPlugin()
    ];
    // 只有打包生产环境才需要将console删除
    if (process.env.NODE_ENV == "production") {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true; // 删除console
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true; // 删除deubgger
      config.plugins = [...config.plugins, ...plugins];
    }
  },
  chainWebpack(config) {
    config.plugins.delete("preload"); // TODO: need test
    config.plugins.delete("prefetch"); // TODO: need test
    config.name = name;

    // 命名
    config.resolve.alias.set("@", resolve("src"));

    // set svg-sprite-loader
    config.module
      .rule("svg")
      .exclude.add(resolve("src/icons"))
      .end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      })
      .end();

    // set preserveWhitespace
    config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true;
        return options;
      })
      .end();

    config.when(process.env.NODE_ENV === "development", cfg =>
      cfg.devtool("cheap-source-map")
    );

    config.when(process.env.NODE_ENV !== "development", cfg => {
      cfg
        .plugin("ScriptExtHtmlWebpackPlugin")
        .after("html")
        .use("script-ext-html-webpack-plugin", [
          {
            // `runtime` must same as runtimeChunk name. default is `runtime`
            inline: /runtime\..*\.js$/
          }
        ])
        .end();
      config.optimization.splitChunks({
        chunks: "all",
        cacheGroups: {
          libs: {
            name: "chunk-libs",
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: "initial" // only package third parties that are initially dependent
          },
          elementUI: {
            name: "chunk-elementUI", // split elementUI into a single package
            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
            test: /[\\/]node_modules[\\/]_?element-ui(.*)  /// in order to adapt to cnpm
          },
          commons: {
            name: "chunk-commons",
            test: resolve("src/components"), // can customize your rules
            minChunks: 3, //  minimum common number
            priority: 5,
            reuseExistingChunk: true
          }
        }
      });
      config.optimization.runtimeChunk("single");
    });
  }
};

vue.config.js中的各个字段含义

pubilcPath: type:string, default:'/'，也可以使用表达式, 部署应用包时的基本URL，用法和webpack本身的output.publicPath一致，但是vue CLI在一些其他地方也需要用到这个值，所以请始终使用publicPath而不要直接修改webpack中的output.publicPath

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

outputDir: type:string, default:'dist'，当运行vue-cli-service build时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除（构建时传入--no-cache可关闭该行为），请始终使用outputDir而不要修改webpack的output.path

assetsDir: type:string, default:''，放置生成的静态资源（css,js,img,fonts)的(相对于outputDir的)目录，从生成的资源覆写filename或chunkFilename时，assetsDir会被忽略

indexPath: type:string, default:'index.html'，指定生成的index.html的输出路径（相对于outputDir），也可以是一个绝对路径

filenameHashing: type:boolean, default:true，默认情况下生成的静态资源在它们的文件名中包含了hash以便更好的控制缓存。

pages: type:object, default:undefined，包含每个page入口名字和入口文件的键值对的对象

lintOnSave: type:boolean | 'warning' | 'default' | 'error', default:'default'，是否在开发环境下通过eslint-loader在每次保存时lint代码，这个值会在@vue/cli-plugin-eslint被安装之后生效。
设置为true或者‘warning’时，eslint-loader会将lint错误输出为编译警告，默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败
如果你希望lint错误在开发时直接显示在浏览器中，你可以使用‘default’,这会强制eslint-loader将lint错误输出为编译错误，同时lint错误也会导致编译失败。
设置为error将会使得eslint-loader把Lint警告也输出为编译错误，这意味着lint警告也会导致编译失败
如果值为truthy的值，eslint-loader在开发和生产构建下都会被启用，如果你想要在生产构建时禁用eslint-loader,你可以使用如下配置：

module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production'
}

runtimeCompiler: type:boolean, default:false，是否使用包含运行时编译器的vue构建版本。

transpileDependencies: 默认情况下babel-loader会忽略node_modules中的文件，可以通过此选项显示转译一个依赖。

productionSourceMap: type:boolean, default:true，如果你不需要生产环境的source-map,可以将其设置为false以加速生产环境构建

crossorigin: type:string, default:undefined，设置生成的<link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性，需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。

integrity: type:boolean, default:false，在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性。需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。

configureWebpack: 配合 webpack > 简单的配置方式

chainWebpack:配合 webpack > 链式操作

css.modules: 从v4起已弃用

css.requireModuleExtension: type:boolean, default:true，默认情况系啊，只有*.module.[ext]结尾的文件才会被视作css Module模块。设置为false后你就可以去掉文件名中的.module，并将所有的*.(css|scss|sass|less|styl(us)?)文件视为CSS Module模块。

css.extact: type:boolean, default:生产环境下是true，开发环境下是false，

css.sourceMap: boolean, default:false，是否为CSS开启source map ,设置为true之后可能会影响构建的性能

css.loaderOptions: 向css相关的loader传递选项。比如

module.exports = {
  css: {
    loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
      },
      postcss: {
        // 这里的选项会传递给 postcss-loader
      }
    }
  }
}

devServer: 所有 webpack-dev-server 的选项都支持

devServer.proxy:如果前端应用和后端API服务器没有运行在同一个主机上，需要在开发环境下将API请求代理到API服务器。就可以通过此选项配置

parallel:是否为babel或typescript使用thread-loader，该选项在系统的CPU有多余一个内核时自动启用，仅作用于生产构建。

pwa: 向 PWA 插件传递选项

pluginOptions:这是一个不进行任何schema验证的对象，因此它可以用来传递任何第三方插件选项。