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

最新推荐文章于 2024-06-29 18:45:00 发布
最新推荐文章于 2024-06-29 18:45:00 发布
阅读量1.3k 收藏 1
点赞数 1
分类专栏： 工程化 文章标签： vue webpack vue.config 微前端 vue-cli
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010059669/article/details/108320464
版权

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/'
        }
      }
    }
  }
}
醉逍遥neo
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
10-14
主要介绍了vue pages 多入口项目 + chainWebpack 全局引用缩写说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
本项目是基于vue开发的一个简易app
08-10
1. **Vue CLI 2.x**: Vue CLI（Vue命令行工具）是Vue.js官方提供的一个脚手架工具，用于快速搭建Vue.js项目。Vue CLI 2.x版本提供了很多预设模板，简化了项目初始化、配置和构建过程。在这个项目中，开发者选择了2.x...
基于Vue实现微前端
一群专业码农的笔记本
04-19 7052
前端微服务化一直是前端社区的一个热门话题，早在2018年就有不少开发者提出过各种解决方案。或许是未得精髓，个人认为基于Web Components的实现脱离整体打包逻辑的，难以工程化。直到遇到了vue-cli 3，子模块打包的问题得以迎刃而解。2019年秋，团队内部初步实现前端分布式开发，解决了集中式开发部署的“老大难”问题。个人认为，随着WebAssembly等技术的兴起，“前端后移”越来越明显，前端微服务会成为大前端的一个趋势。
Webpack: 构建微前端应用
最新发布
Wang的专栏
06-29 1263
Module Federation 是 Webpack 5 新引入的一种远程模块动态加载、运行技术，虽然国内讨论热度较低，但使用简单，功能强大，非常适用于微前端或代码重构迁移场景。使用上，只需引入插件，按要求组织、分割好各个微应用的代码，并正确配置配置项即可实现基于 HTTP(S) 的模块共享功能。此外，我们还可以通过插件的shared配置项实现在应用间共享基础依赖库，还可以通过等一系列配置，精细控制依赖的共享版本与范围。
微前端在Vue项目的实践
前端精髓
03-02 4049
文章的参考：微前端在美团外卖的实践 我将讲解微前端如何在Vue项目中实践和应用，业务逻辑参考文中介绍的，文章中介绍的逻辑比较清晰，但是并没有提供过多的业务代码，对微前端如何应用到具体的项目我们就无从而知，为了介绍如何应用到项目中，我就写下了这篇文章，我们应用的工程是在Vue项目中。 如果你还不知道如何通过webpack配置Vue项目，请先参考这篇文章：自己搭建一个Vue项目工程 我的微前端项目...
如果使用Webpack落地微前端
西岭老湿 的博客
07-07 288
Vue.js前端开发实战-自测卷和课后习题答案.rar
07-10
8. **Vue CLI**：Vue命令行工具提供了一套快速脚手架，帮助开发者搭建Vue项目，包含自动配置的Webpack和Babel，以及预设的开发和生产环境。 这个压缩包中的自测卷和课后习题涵盖了以上知识点，可能包括了Vue实例的...
详解Vue+ElementUI从零开始搭建自己的网站（一、环境搭建）
11-29
VueJS可以说是近些年来最火的前端框架之一，越来越多的网站开始使用vue作为前端框架，vuejs轻量、简单，对于前端友好，学习路线平坦，这使得前端开发变得更加简易，而基于vuejs的前端组件库也越来越多。其中...
使用Vue全家桶+Node.js搭建的小型全栈项目.zip
10-21
在这个名为“使用Vue全家桶+Node.js搭建的小型全栈项目.zip”的压缩包中，包含了一个使用现代前端框架Vue.js及其相关工具（Vue Router、Vuex等）和后端技术Node.js构建的全栈应用程序。这个项目可能是一个简易的豆瓣...
用vue和node写的简易购物车实现
08-30
Vue与Node实现简易购物车 ...本项目主要介绍了使用Vue和Node实现简易购物车的过程，从搭建本地环境到数据库设计、后端实现和前端实现等方面都进行了详细的介绍。本项目的实现可以作为学习Vue和Node的参考项目。
vite项目支持webpack打包
shareworld001的博客
09-03 1532
cordova不支持vite的esm打包下的选择。
Webpack5构建微前端和Web应用程序2022教程
duoshehuan6005的博客
10-04 566
Webpack5构建微前端和Web应用程序2022教程从基础到高级概念，如加载器、插件、模块联合、构建生产应用程序（React App）课程英文名：Webpack 5 Ninja (2022) - Build Micro frontend and web apps此视频教程共7.5小时，中英双语字幕，画质清晰无水印，源码附件全。
webpack中output配置
MisTTT的博客
06-23 2396
output: { path: path.resolve(__dirname, "public/assets"),// 编译文件的输出路径 publicPath:"./assets/",// 文件的引用 chunkFilename: "[id].[name].chunk.js" /* * chunkFilename
vite和webpacke的常规配置
Smile_666666的博客
04-23 1036
vite官网vite是一个由Vue.js开发的构建工具，它利用了ES Module Imports，在开发环境下可以实现按需编译，加快了开发速度。而在生产环境下，它使用Rollup进行打包，提供更好的tree-shaking、代码压缩和性能优化。vite主要解决了现有工具（如webpack、rollup）在大型项目开发过程中存在的启动慢、热更新慢等问题。vite致力于为现代前端工作流提供一个更快、更轻的解决方案。快速的启动时间。通过区分依赖和源码两类模块，改进了开发服务器启动时间。
微前端之 Webpack5 的 module federation
GoldenaArcher的博客
01-09 366
代码在的 module federation branch 下面，关于其他的配置，可以看 webpack5 查漏补缺系列。目前的代码配置是这样的：简单的说一下就是，目前有 3 个项目：hello-world，也就是 homeremotelionremotedashboardhost这里的 host 会使用 remote 开放的组件，也就是 home 和 lion 两个页面：这里导出的是两个页面，但是是机上使用 webpack 也可以导出方法/库让 host 去使用。
webpack4 SplitChunks实现代码分隔详解
weixin_34130389的博客
05-22 889
代码均放在git仓库 Webpack 4给我们带来了一些改变。包括更快的打包速度，引入了SplitChunksPlugin插件来取代（之前版本里的）CommonsChunksPlugin插件。在这篇文章中，你将学习如何分割你的输出代码，从而提升我们应用的性能。 SplitChunks插件(webpack 4.x以前使用CommonsChunkPlugin)允许我们将公共依赖项提取到现有的entry...
webpack手摸手学习系列之配置详解的 entry、output、module、resolve、devServer 和 optimization
浮生离梦的博客
05-31 568
一、webpack 配置详解之 entry 创建空文件夹，通过 npm init 命令初始化 package.json 文件，通过 npm install webpack webpack-cli -g 命令全局下载 webpack 和 webpack-cli，通过 npm i html-webpack-plugin -D 命令下载 html-webpack-plugin 。 创建 src 文件夹，在里面创建 add.js、count.js 和 index.js 文件，代码如下所示： add.jsfun
快速入门：Vue CLI搭建Vue项目与ESLint、Webpack配置详解
本文将详细指导如何使用vue-cli这个前端开发工具来快速搭建一个Vue.js项目。首先，确保已安装Node.js和npm，因为vue-cli是基于它们构建的。Vue-cli是一个脚手架工具，它简化了项目的初始化过程，集成了webpack、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值