首页

vue.config.js配置别名alias、配置生产环境清除console

胡西风_foxww
2023-07-11  阅读 174

项目中使用引入文件有时候路径比较深,需要使用 "../../../xx.js" 这种类似的路劲引入,这种方式比较笨,可以使用 webpack 的别名 alias 配置来解决。

首先,先确定项目中是否有 path 模块:

如果没有 path 模块需要先安装 path

npm  install  path  --save复制代码

以下为 vue.config.js 配置

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("base", resolve("baseConfig"))
      .set("public", resolve("public"));
  },
}复制代码

项目开发阶段经常需要 console 一些测试数据,查看开发过程中遇到的问题,但生产环境中这些 console 数据需要清掉,以前操作是项目配置一个全局的标志,判断是否打印 console 数据,近期发现一个更简便的方法,通过 webpack 配置生产环境自动清除 console。

首先,安装 uglifyjs-webpack-plugin 插件:

npm  install  uglifyjs-webpack-plugin  --save复制代码

其次,在 vue.config.js 文件引入插件。

最后,配置 configureWebpack 如下代码:

const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 引入插件

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console: true, //console
              drop_debugger: false,
              pure_funcs: ["console.log"] //移除console
            }
          }
        })
      ]
    }
  },
}复制代码

原文地址 www.cnblogs.com

本文为作者原创文章,转载无需和我联系,但请注明来自 【前端黑猫】