// 执行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个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
有需要的小伙伴，可以点击下方卡片领取，无偿分享
vue.config.js配置介绍
vue.config.js配置介绍
`vue.config.js` 是 Vue CLI 3.x+ 的配置文件，用于配置 Vue 项目的构建和开发过程中的各种配置选项。下面是一些常见的配置选项及其说明：
1. `publicPath`: 指定打包后静态资源的基础路径，默认值为 `/`。可以通过该选项配置 CDN 的地址或者指定其他的路径。
2. `outputDir`: 指定打包后的文件输出目录，默认值为 `dist`。
3. `assetsDir`: 指定打包后静态资源（js、css、img 等）的目录，默认值为 `assets`。
4. `indexPath`: 指定打包后的 index.html 文件路径，默认值为 `index.html`。
5. `productionSourceMap`: 是否生成生产环境的 source map，默认值为 `true`。可以通过设置为 `false` 来减少构建时间，但是这会使得调试时比较困难。
6. `configureWebpack`: 如果需要更细粒度的控制
module.exports = {
publicPath: './', // 【必要】静态文件使用相对路径
outputDir: "./dist", //打包后的文件夹名字及路径
devS..
vue脚手架3.0，nom run serve时报
(node:783) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 upgrade listeners added to [Server]. Use emitter.setMaxListeners() to increase limit
百度翻译一下(节点：783)MaxListenerExceedWarning:检测到可能的EventEmitter内
这是基于cli3.x版本的环境变量配置指南。没有过多复杂的介绍，只有极简的实用配置。旨在给需要的朋友提供帮助以及自己温故知新，真正一看就会懂，懂了就能用。
配置环境变量的目的
项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把...
在项目中，可以使用vue.config.js文件来配置环境。根据引用[1]和引用[2]的内容，可以看出vue.config.js文件的作用是对项目进行webpack的配置。其中，可以配置是否生成map文件、接口api配置、less样式配置等。在开发环境下，可以在.vue.config.js文件中设置devServer.proxy来配置接口代理。在生产环境下，可以在.vue.config.js文件中设置productionSourceMap来控制是否生成map文件。此外，还可以在.vue.config.js文件中设置其他的webpack配置，以满足项目的需求。
