vue简易微前端项目搭建（三）：webpack相关配置

最新推荐文章于 2025-08-24 15:35:39 发布
原创 最新推荐文章于 2025-08-24 15:35:39 发布 · 1.5k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
工程化

当前文章被收录于：

工程化
10 篇文章 4 人学习

前端工程化

订阅专栏 查看详情
本文详细介绍了基于Vue CLI4的微前端项目配置流程，包括如何利用.env文件存储环境变量，自定义vue.config.js中的webpack配置，如入口文件、html模板、输出目录、基路径、代理服务、alias、prefetch移除、静态文件处理等。

github传送门：
1、h5主项目
2、项目脚手架
3、子项目模板

系列文章传送门：
vue简易微前端项目搭建（一）：项目背景及简介
vue简易微前端项目搭建（二）：子项目模板及项目脚手架搭建
vue简易微前端项目搭建（三）：webpack相关配置

1、概述

由于项目是基于vue-cli4改造的，所以webpack相关配置我们就在vue.config.js里操刀，没有该文件的直接在项目根目录新建vue.config.js即可，具体配置api参考官方文档（传送门）

2、process.env

先说一下这个，因为后面会用到这里存储的变量值。
在系列文章上一篇中说到了.env文件，里面定义的变量会自动加入到process.env变量中，具体参考官方说明：传送门
这里再简单说明一下，先看目录：
在这里插入图片描述

（1） .env 这个是全局共用的

# 定义api地址的代理标识
VUE_APP_PROXY_CODE = '/proxy'

# 定义路由history模式是否开启(1开启 0关闭)
VUE_APP_HISTORY_OPEN = 0

# 定义路由history模式下项目在服务器上部署的基路径
VUE_APP_HISTORY_BASE = '/h5'

# 定义h5版本号
VUE_APP_H5_VERSION = '2.1.9.0'

（2）.env.prod

这个是通过指定prod环境运行脚手架命令时会启用的

# 定义环境模式
VUE_APP_SERVER_ENV = 'prod'

# 定义服务器基础地址
VUE_APP_SERVER_URL = 'https://prod.com'

（3） 其他.env

其他的 .env.test 和 .env.beta 用法同上

（4）示例

例如运行脚手架命令：dyd start demo prod，能获取到的process.env变量有：

  • .env文件里启用的：
process.env.VUE_APP_PROXY_CODE
process.env.VUE_APP_HISTORY_OPEN
process.env.VUE_APP_HISTORY_BASE
process.env.VUE_APP_H5_VERSION
  • .env.prod文件里启用的：
process.env.VUE_APP_SERVER_ENV
process.env.VUE_APP_SERVER_URL
  • 还有获取到的子项目名（代码目录：/build/processEnv.js）：
process.env.VUE_APP_PROJECT_NAME = process.argv[3].split('---')[1]
  • 还有自带的process.env.NODE_ENV
    我这里做了改动，本地运行时值为development，打包时值为production（代码目录：/build/processEnv.js）：
// 设置NODE_ENV
const runType = process.argv[2]
if (runType === 'serve') {
  // 本地运行 npm run serve
  process.env.NODE_ENV = 'development'
} else if (runType === 'build') {
  // 打包项目 npm run build
  process.env.NODE_ENV = 'production'
}

3、vue.config.js

所有配置改动最终都汇聚在这里，按照vue-cli官方配置导出一个配置对象即可。

（1）获取子项目名

前面已经把获取到的子项目存储到process.env.VUE_APP_PROJECT_NAME 里了

const projectName = process.env.VUE_APP_PROJECT_NAME

（2）入口文件及html模板

在chainWebpack里进行配置：

chainWebpack: config => {
	// 入口文件
    config
      .entry('app')
      .clear()
      .add(`./src/projects/${projectName}/main.js`)
	// html模板文件
    config
      .plugin('html')
      .tap(args => {
        args[0].template = `./src/projects/${projectName}/index.html`
        args[0].templateParameters = {
          FAVICON_PATH: './favicon.ico'
        }
        return args
      })
  },

（3）打包输出目录

子项目按文件夹进行了划分，那打包后文件也同样需要划分开，并列在dist文件夹里即可

outputDir: `dist/${projectName}`,

（4）部署应用的基路径

开启路由history模式和不开启的配置不太一样：

  • 开启history模式时，基路径为 在服务器域名上部署的基目录 + 子项目名
  • 未开启时，打包项目用相对路径 ‘./’，本地运行用绝对路径 ‘/’
publicPath: +process.env.VUE_APP_HISTORY_OPEN
    ? `${process.env.VUE_APP_HISTORY_BASE}/${projectName}`
    : (process.env.NODE_ENV === 'production' ? './' : '/'),

process.env.VUE_APP_HISTORY_OPEN 和 process.env.VUE_APP_HISTORY_BASE 都配置在了.env文件里。

（5）代理服务配置

首先获取代理转发地址，还记得子项目模板里的config.js吗，本地dev启动就读取这个文件的地址：

// 获取代理服务器基础地址
let proxyServerUrl = process.env.VUE_APP_SERVER_URL
if (process.env.VUE_APP_SERVER_ENV === 'dev') {
  const ChildProjectConfig = require(resolve(`./src/projects/${projectName}/config.js`))
  proxyServerUrl = ChildProjectConfig.devServerUrl
}

然后配置devServer:

devServer: {
    host: '0.0.0.0',
    port: 8800,
    open: false, // 是否自动打开浏览器
    progress: false, // 是否显示进度
    proxy: {
      [process.env.VUE_APP_PROXY_CODE]: {
        target: proxyServerUrl,
        ws: true,
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          ['^' + `${process.env.VUE_APP_PROXY_CODE}/${process.env.VUE_APP_SERVER_ENV}`]: ''
        }
      }
    }
  },

（6）alias快捷路径标识

也是在chainWebpack里配置：

chainWebpack: config => {
	config.resolve.alias
      .set('@@', resolve('./src/resources'))
      .set('@', resolve(`./src/projects/${projectName}`))
}

（7）去除prefetch

prefetch是一种性能优化方式，支持的浏览器会在空闲时提前下载解析，对于路由懒加载来说，这个功能会在你打开一个路由后把其他路由文件都加载下来，对于一整个关联性强的项目来说比较适用，比如后台管理系统，而对于本项目来说，主要应用场景是混合app内嵌h5页，页面比较分散，还有各种一次性活动页什么的，通常都会划分类别放在一个子项目里，不需要提前加载其他路由，所以不适合prefetch技术。

chainWebpack: config => {
	config.plugins
      .delete('prefetch')
}

（8）静态不打包目录

  • 有时候需要引用第三方打包好的js文件，而这种文件一般不能做二次打包，就需要个静态不打包目录，vue-cli官方提供的public文件夹是可以，但子项目里的都扔进去也不合适，还是单独配置为好，
  • 之前的子项目模板里默认有个static文件夹，就是预留给这个的，
  • 通过configureWebpack里配置plugins，插件使用copy-webpack-plugin
const CopyWebpackPlugin = require('copy-webpack-plugin')

configureWebpack: config => {
    const copyWebpackPlugin = new CopyWebpackPlugin([
	  {
	    from: Path.resolve(__dirname, '../src/projects/', projectName, 'static'),
	    to: 'static',
	    ignore: ['.*']
	  }
	])
    // 更新config
    config.plugins = [...config.plugins, copyWebpackPlugin]
  },

4、完整代码

vue.config.js

/**
 * Created by hanxueqiang on 19/11/13
 */
require('./build/processEnv.js')
const Path = require('path')
const Plugins = require('./build/plugins')

const projectName = process.env.VUE_APP_PROJECT_NAME

function resolve (dir) {
  return Path.resolve(__dirname, dir)
}

// 获取代理服务器基础地址
let proxyServerUrl = process.env.VUE_APP_SERVER_URL
if (process.env.VUE_APP_SERVER_ENV === 'dev') {
  const ChildProjectConfig = require(resolve(`./src/projects/${projectName}/config.js`))
  proxyServerUrl = ChildProjectConfig.devServerUrl
}

module.exports = {
  publicPath: +process.env.VUE_APP_HISTORY_OPEN
    ? `${process.env.VUE_APP_HISTORY_BASE}/${projectName}`
    : (process.env.NODE_ENV === 'production' ? './' : '/'),
  outputDir: `dist/${projectName}`,
  productionSourceMap: false,
  lintOnSave: process.env.NODE_ENV !== 'production',

  // 开发环境服务配置
  devServer: {
    host: '0.0.0.0',
    port: 8800,
    open: false,
    progress: false,
    proxy: {
      [process.env.VUE_APP_PROXY_CODE]: {
        target: proxyServerUrl,
        ws: true,
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          ['^' + `${process.env.VUE_APP_PROXY_CODE}/${process.env.VUE_APP_SERVER_ENV}`]: ''
        }
      }
    }
  },

  // 合并webpack配置
  configureWebpack: config => {
    // 性能提示
    let myPerformance = {}
    if (process.env.NODE_ENV === 'production') {
      myPerformance = {
        hints: 'warning',
        maxEntrypointSize: 1024000,
        maxAssetSize: 1024000
      }
      config.plugins.forEach(v => {
        if (v.constructor.name === 'MiniCssExtractPlugin') {
          // 去除 mini-css-extract-plugin 警告
          v.options.ignoreOrder = true
        }
      })
    }
    // 更新config
    config.plugins = [...config.plugins, ...Plugins]
    config.performance = { ...config.performance, ...myPerformance }
  },

  // 修改webpack配置
  chainWebpack: config => {
    config.resolve.alias
      .set('@@', resolve('./src/resources'))
      .set('@', resolve(`./src/projects/${projectName}`))

    config
      .entry('app')
      .clear()
      .add(`./src/projects/${projectName}/main.js`)

    config
      .plugin('html')
      .tap(args => {
        args[0].template = `./src/projects/${projectName}/index.html`
        args[0].templateParameters = {
          FAVICON_PATH: './favicon.ico'
        }
        return args
      })

    // config.plugins
    //   .delete('preload')
    config.plugins
      .delete('prefetch')

    // chunk分离优化
    config.optimization
      .splitChunks({
        chunks: 'all',
        maxAsyncRequests: 8,
        maxInitialRequests: 6,
        minSize: 20000,
        cacheGroups: {
          vue: {
            name: 'chunk-vue',
            test: /[\\/]node_modules[\\/](vue|vue-router)[\\/]/,
            priority: 40
          },
          vconsole: {
            name: 'chunk-vconsole',
            test: /[\\/]node_modules[\\/]vconsole[\\/]/,
            priority: 30
          },
          vendors: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            chunks: 'initial'
          },
          common: {
            name: 'chunk-common',
            minChunks: 2,
            priority: -20,
            chunks: 'initial',
            reuseExistingChunk: true
          }
        }
      })
  },

  // 指定babel-loader要编译的node_modules包
  transpileDependencies: [],

  css: {
    loaderOptions: {
      less: {
        globalVars: {
          '@imgBaseGlobal': '~@@/assets/images/',
          '@imgBase': '~@/assets/images/'
        }
      }
    }
  }
}
标签
#vue #webpack #vue.config #微前端 #vue-cli
# 【vue基础篇】一看就懂的vue环境变量配置
weixin_33840661的博客
06-04 1万+
这是基于cli3.x版本的环境变量配置指南。没有过多复杂的介绍，只有极简的实用配置。旨在给需要的朋友提供帮助以及自己温故知新，真正一看就会懂，懂了就能用。 配置环境变量的目的 项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把...
vue简易微前端项目搭建（一）：项目背景及简介
醉逍遥neo的博客
07-16 3748
最近有空，准备写个系列教程，把公司目前在用的h5项目从搭建到实践优化的一些心得和经验记录一下，技术栈是vue2.x的，马上3.0正式版就要出了，再不写就要过时啦哈哈。 github传送门： 1、h5主项目 2、项目脚手架 3、子项目模板 1、项目需求 我司h5主要做移动端，运行在app和小程序里，也就是hybrid app混合开发模式。 刚来公司时，公司h5才刚开始起步，同事只开发了三个h5需求，这三个需求在业务功能上都是相互独立的，所以也分开放在了三个spa项目里。。。想一想，以后开发类似需求越来越多，难
webpack entry 与 output 的基本配置
purple_lumpy的博客
03-13 433
entry 配置项，可以传一个字符串，也可以传一个对象。 下面，entry 配置项就是传的对象。如果传字符串的话，实际上就等价于下面(字符串是main 对应的value )。 接着，我们如果在output 中指定了filename，那么最后打包js 的名字就是指定的filename, 否则就是 main.js ，而这个main.js 就来源与entry 中的key 值。 const pat...
webpack-chain
飞翔的熊blabla
01-24 1万+
webpack-chain 一、修改entry和output chainWebpack: config => { config.entryPoints.clear() // 会把默认的入口清空 config.entry('main').add('./src/main.js')//新增入口 config.entry('routes').add('./src/app-routes.js')//新增入口 config.output .path("dist")
vue-cli 中 chainWebpack 的常用操作
細水、長流√的专栏
11-08 4085
2、使用 vue inspect 可以查看当前 webpack 配置。
vue配置环境变量（可验证、步骤详细）
AngieLife
04-07 2万+
.env.development和.env.production文件是什么？ .env.development 是开发环境下的配置文件 .env.production 是生产环境下的配置文件 如果这两个文件是空的，那么运行 npm run serve 时，process.env.NODE_ENV 的值默认就是 development；运行 npm run build 时，process.env.NODE_ENV 的值默认就是 production； "scripts": { "serve": "vu
vue简易微前端项目搭建（二）：子项目模板及项目脚手架搭建
醉逍遥neo的博客
08-28 2215
github传送门： 1、h5主项目 2、项目脚手架 3、子项目模板 系列文章传送门： 1、子项目模板 子项目模板就是用于快速创建一个配套的子项目，也就是在主项目目录/src/projects/下的一个子文件夹，作为模板项目，就是做个基础示例，主要是两点作用：一是能运行跑起来，方便直接写业务；二是有一个引导的作用，方便初上手的同事能快速熟悉项目的运行及使用。 结构大概如下： 画红圈的template文件夹下的内容即是模板文件，其他的只是代码校验工具忽略即可。 基本上就是遵从vue项目src目录大致结构。
微前端在Vue项目的实践
前端精髓
03-02 4248
文章的参考：微前端在美团外卖的实践 我将讲解微前端如何在Vue项目中实践和应用，业务逻辑参考文中介绍的，文章中介绍的逻辑比较清晰，但是并没有提供过多的业务代码，对微前端如何应用到具体的项目我们就无从而知，为了介绍如何应用到项目中，我就写下了这篇文章，我们应用的工程是在Vue项目中。 如果你还不知道如何通过webpack配置Vue项目，请先参考这篇文章：自己搭建一个Vue项目工程 我的微前端项目...
微前端vue项目实战 -- 乾坤qiankun框架 （一）
热门推荐
csl125的博客
04-09 3万+
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 如何使用qiankun搭建基于vue的微前端
Vue 生态中的微前端：如何将 Vue 集成到微服务架构中
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
12-13 2219
微前端架构（Micro Frontends）是借鉴微服务架构的思想，在前端领域中将大型应用拆分成多个小型、独立的模块或子应用，每个模块可以由独立的团队开发、测试、部署，并且可以独立运行和维护。微前端旨在解决传统前端开发中的模块过大、难以维护和无法快速迭代的问题。微前端架构将大大提升前端应用的模块化和可维护性，而 Vue 作为一个灵活且易于集成的框架，在微前端架构中有着非常广泛的应用。通过合理的技术选型和工具支持，我们可以将 Vue 应用无缝集成到微前端架构中，提升系统的灵活性、可扩展性和开发效率。
qiankun + Vue + React18 搭建微前端
ExtremeExplorer的博客
09-26 1634
本章节基于 Vue + qianakun 的方式搭建的微前端，微前端有主应用与微应用构成。**主应用：**Vue3 + Vite。
vue2项目从0搭建(三):配置环境变量及对应的webpack配置
m0_54741495的博客
11-24 3779
实际业务开发中,一个项目很可能会同时配置好几套环境。比如:常规开发环境,开发测试环境,正式的测试环境,预发测试环境,客户甲的生产环境,客户乙的生产环境,通用生产环境,独立应用环境,微前端环境,大屏专用环境,移动端环境。一女多嫁的实际业务场景,就需要我们进行多样化的环境配置。不同的环境需要有不同的一些标识,也要有一些不同的webpack配置或者资源优化。个人认为这里的知识是十分重要的,因为这里对于工作中实际交付项目或者多客户客制化开发是很重要的。
微前端之实现方式和项目分析、实践主子应用启动配置、vue2、vue3、react15、react16 子应用的配置
浮生离梦的博客
07-09 1528
一、微前端之实现方式和项目分析 1. 微前端实现方式对比，如下所示： - `Iframe`，`Iframe` 的优势是技术成熟，支持页面嵌入，天然支持运行沙箱隔离、独立运行。`Iframe` 的劣势是页面之间可以是不同的域名，需要对应的设计一套应用通讯机制，如何监听、传参格式等内容，应用加载、渲染、缓存等体系的实现 - `web component`，`web component` 的优势是支持自定义元素、支持 `shadow down`，并可通过关联进行控制，支持模版 `template` 和插槽 `sl
微前端——乾坤qiankun Demo
欠踹的背影
12-05 2万+
微前端——qiankun（乾坤）实例 一、什么是微前端 微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆，拆完后在合！ 二、为什么使用微前端 不同团队间开发同一个应用技术栈不同 希望每个团队都可以独立开发，独立部署 项目中还需要老的应用代码 我们可以将一个应用划分成若干个子应用，将子应用打包成一个个的 lib 。当路径切换 时加载不同的子应用。这样每个子应用都是独立的，技术栈也不用做限制了！从而解决了前端协同开发问题。 三、qiankun框架 **文档
【微前端乾坤】 vue2主应用、vue2+webpack子应用，vue3+webpack子应用、vue3+vite子应用的配置
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
03-04 4380
因公司需求， 需要将原本vue2+iframe 形式的项目改成微前端乾坤的方式。 之前iframe都是直接嵌套到vue2项目的二级目录或者三级目录下的(反正就是要随处可嵌) 注意使用场景：原本vue2+iframe 形式的项目改成微前端乾坤的方式，将vue2改成微服务的主应用（基座），之前iframe嵌套在vue2项目中的其他页面的系统改成微服务的子应用，嵌套的只是子应用路由中的一个页面 ， 也就是 主应用 的一个 路由页面 对应 子应用 的一个 路由页面 ， 不是那种常规的一个出口包含了整个子应用
webpack 5 模块联邦实现微前端疑难问题解决
mjzhang1993的博客
04-19 1万+
webpack 5 模块联邦实现微前端疑难问题解决 说明 webpack 5 新增 Module Federation（模块联邦）功能，他可以帮助将多个独立的构建组成一个应用程序，不同的构建可以独立的开发与部署。 借助模块联邦我们可以一定程度的实现微前端 微前端官网 Module Federation 模块联邦官网 Module Federation 案例 概念 1. 什么是微前端？ 微前端将微服务理念扩展到前端开发，一般来讲一个微服务架构中会有多个后端团队开发不同的业务服务，而前端通常只有一
Vue CLI 搭建Vue3项目升级webpack5（一）
GEYANG2010的专栏
02-27 3244
升级webpack5主要是想用模块联邦实现微前端，随着单体项目会越来越大，打包效率及开发效率都受影响，所以可以像服务端那样拆出微服务，方便独立开发，独立打包部署。因为微前端涉及多个子项目，所以可以用monorepo来管理项目集，monorepo是把多个项目放到同一个代码仓库管理（包括vue3、babel、react在内的众多国内外著名的项目都采用了这种方式），我采用了lerna多包管理工具来构建项目仓库，本文先介绍初始化项目仓库以及用vuecli脚手架搭建vue3项目。
qiankun实战指南：快速搭建微前端项目
最新发布
gitblog_00264的博客
08-24 1090
qiankun实战指南：快速搭建微前端项目 【免费下载链接】qiankun ???? ???? Blazing fast, simple and complete solution for micro frontends. 项目地址: htt...
微前端（qiankun）vue2、vue3+webpack、vue3+vite的详细使用
m0_60893808的博客
06-19 1690
微前端 qiankun 是一个基于Single-SPA框架开发的、开源的微前端实现库，由蚂蚁金服（现蚂蚁集团）团队开发和维护。它的目标是为开发者提供一套简单、强大且生产可用的解决方案，帮助构建大型单页应用或聚合多个独立前端应用，无视框架限制React、Vue、Angular 等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值