注入变量,这里需要使用到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],
};