vue.config.js 多环境配置

// 执行npm run dev时报错： MaxListenersExceededWarning:Possible EventEmitter memory leak detected
require("events").EventEmitter.defaultMaxListeners = 50;
const { defineConfig } = require("@vue/cli-service");
const webpack = require("webpack");

//去除多余的console.log
const TerserPlugin = require("terser-webpack-plugin");
const path = require("path");
// 获取.env文件的环境变量
const dotenv = require("dotenv");
// 定向目录
const resolve = (dir) => path.join(__dirname, dir);
// 加载多环境的 .env 配置
dotenv.config({ path: `.env.${process.env.VUE_APP_NODE_ENV}` });

// 根据环境 build 不同的 proxy
const { api } = require("./api");
const API = api[process.env.VUE_APP_NODE_ENV];
const buildEnvApiProxy = () => {const PROXY = {};Object.keys(API).forEach((key) => {console.log(`环境====》${process.env.VUE_APP_NODE_ENV}`,key,"====>",API[key]);const pathRewrite = {};pathRewrite[`^${key}`] = "";PROXY[`${key}`] = {target: API[key],changOrigin: true,pathRewrite: pathRewrite,};});return PROXY;
};

// 根据环境 build 不同的 plugins
const buildEnvPlugins = () => {const plugins = [];if (process.env.VUE_APP_NODE_ENV === "prod") {plugins.push(new TerserPlugin({terserOptions: {ecma: undefined,warnings: false,parse: {},compress: {drop_console: true,drop_debugger: true,pure_funcs: ["console.log"], // 移除console},},}));}return plugins;
};

module.exports = defineConfig({publicPath: "/",outputDir: "dist",assetsDir: "static",transpileDependencies: true,pages: {index: {// page的入口文件entry: "src/main.ts",// 当使用 title 选项时，// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>title: "dsdsdddss",},},// 向 CSS 相关的 loader 传递选项css: {// 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS// 默认生产环境下是 true，开发环境下是 falseextract: false,// 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能sourceMap: false,/*为预处理器 loader 传递自定义选项*/loaderOptions: {sass: {additionalData: `@import "@/assets/scss/_variable.scss";`, // 预设全局css变量},css: {// 这里的选项会传递给 css-loader},postcss: {// 这里的选项会传递给 postcss-loader},},},chainWebpack: (config) => {// 修复热更新失效config.resolve.symlinks(true);config.resolve.alias // 添加别名.set("@", resolve("src")).set("@assets", resolve("src/assets")).set("@components", resolve("src/components")).set("@views", resolve("src/views")).set("@store", resolve("src/store")).set("@router", resolve("src/router")).set("@utils", resolve("src/utils"));},devServer: {host: "127.0.0.1",port: 8888,proxy: buildEnvApiProxy(),},configureWebpack: {devtool: "eval-source-map",plugins: [new webpack.DefinePlugin({。。。。}),...buildEnvPlugins(),],},
}); 

需要结合 dotenv, cross-env， .env

package.json

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享