vue.config.js配置

我有柚子茶噢

已于 2023-11-06 14:46:21 修改

阅读量4.9k

点赞数

文章标签： vue.js 前端 javascript

于 2023-11-06 14:44:29 首次发布

本文链接：https://blog.youkuaiyun.com/qq_46160082/article/details/134243395

版权

1.transpileDependencies配置项

"transpile" 是一个合成词，由 "translate"（翻译）和 "compile"（编译）两个词组合而成。

转义依赖库的意思，将某些依赖库进行语法转换，有些依赖库的语法很超前，对一些浏览器兼容性不好，所以统一将其转义成ES5的低级语法。在前端开发领域，"transpile" 经常用来指代将较新版本的 JavaScript 代码转换为向后兼容的旧版本，以确保代码可以在更广泛的浏览器环境中运行。这通常通过使用类似 Babel 这样的工具实现。

  transpileDependencies: ["view-design/src"],

2.chainWebpack配置项

"chain"是链子，链式的意思，这个配置项是一个函数，可以在改函数内部多次使用config对象，一次性做很多配置，而无需再重写整个webpack配置对象。

 chainWebpack: config => {
    config.plugin("SpriteLoaderPlugin").use(SpriteLoaderPlugin, [
      {
        plainSprite: true
      }
    ]);
    config.resolve.alias.set(
      "@dist/dora",
      path.resolve(__dirname, "node_modules/@dist/dora/src/index.js")
    );
    if (process.env.NODE_ENV === "production") {
      config.plugin("CompressionPlugin").use(CompressionPlugin, [
        {
          filename: "[path].gz[query]",
          algorithm: "gzip",
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
          threshold: 10240,
          minRatio: 0.8
        }
      ]);
    }
  },

在里面可以同时做config.plugin插件的添加配置、config.resolve.alias全局别名的添加设置等等；

其中此处的全局别名设置可以不换主体代码去测试第三方库的代码，例如自己开发的包，上线后进行了压缩混淆，但是先需要排查问题去升级调整自己开发的包，这个时候需要测试问题，就需要将上线前的包接入，此时就可以用这种配置方式去更换全局的引入源，从而做到对代码零侵入。如果接入未打包混淆之前的库，那么除了全局地址更换，还需要考虑语法的兼容适配性，所以需要将包进行转义transpileDependencies。