Vue中注入process.env变量和打包清空console

114 阅读1分钟

注入变量,这里需要使用到webpack.definePlugin

  • 在vue中写vue.config.js书写配置文件

  • module.exports={}做AMD抛出

  • 抛出文件中用chainWebpack做注入

chainWebpack: (config) => {

  config.plugin("define").tap((args) => {

   args[0]["process.env"].PUB_ENV = JSON.stringify(process.env.PUB_ENV);

   return args;

  });//这里是注入全局变量

  config.optimization.minimize = true; //压缩代码(好像本身就是true啊)

  config.optimization.splitChunks = {

   ...config.optimization.splitChunks,

   chunks: "all",

  };//书写chunk模式异步加载

 },

Vue书写babel打包时清空console(用到一个babel包transform-remove-console)

  • 首先根目录建立文件babel.config.js

  • 然后引入dotenv包(用于读写process.env文件的,只在配置文件中有用)

const dotenv = require("dotenv");

dotenv.config();

// console.log(process.env.PUB_ENV, "PUB_ENV in babel.config.js");

// 此处引用PUB_ENV来判别当前所处环境并通过babel处理console

const prodPlugin = [];

// if (process.env.NODE_ENV === "production" || process.env.PUB_ENV === "test") {

if (process.env.NODE_ENV === "production" || process.env.PUB_ENV === "pre") {

 // 如果是生产环境或测试环境(PUB到哪个环境),则自动清理掉打印的日志,但保留error 与 warn

 prodPlugin.push([

  "transform-remove-console",

  {

   // 保留 console.error 与 console.warn

   exclude: ["error", "warn"],

  },

 ]);

}

module.exports = {

 presets: ["@vue/cli-plugin-babel/preset"],

 plugins: [...prodPlugin],

};