基于Vue-cli的一套代码支持多个项目的解决方案

SQC 发布于2019-08-22 18:22 / 1860人阅读

摘要：基于的一套代码支持多个项目的解决方案应用场景在端业务中，同样的产品，客户多多少少会要求一些定制化。那么，是否可以一套代码支持多个项目呢前段时间，接了一个需求，技术选型是，用搭建的。在这个场景下研究了一下解决方案。

基于Vue-cli的一套代码支持多个项目的解决方案 应用场景

在toB端业务中，同样的产品，客户多多少少会要求一些定制化。从皮肤，图片，到一些小的功能的差异。
前端总是冲在最前面需要改的。如果改动不大的话，拉个分支有增加了维护的成本，分支拉多了，如果主干有一个问题相当于copy了n份，那个滋味简直不要太酸爽。那么，是否可以一套代码支持多个项目呢？

前段时间，接了一个需求，技术选型是VUE，用vue-cli搭建的。一套代码需要支持10几家客户，每家的皮肤，功能都有一些小的差异，主体流程大致是一样的。在这个场景下研究了一下解决方案。

思路

总体的思路模块化，然后在编译的时候根据输入命令直接组装不同的模块，打包出我们需要的页面。
这个地方就有两个问题：

1.如何划分页面，控制组件的颗粒度？

2.如何差异化编译？

项目结构

同样一个页面，有相同的部分，也有一些不一样的部分。vue本身的组件化思想很容易让我们想到把页面拆分成组件，然后把公共的提取出来，差异化的分别处理。

项目总体结构

build

build结构中主要是webpack的一些脚本配置

config

config文件主要是项目相关配置，我们常用的就是当端口冲突时配置监听端口，打包输出路径及命名等

src

源码文件。

assets:静态资源，一般放图片，样式等

less：样式文件，这里分主题处理了

pages：页面文件

router：路由

util：工具类

components

文件夹中是各个项目的自有的组件。components目录下的是公共的组件

static

静态资源，不会被webpack编译。一般放一下外部引用文件。

webpack打包配置 如何差异化编译？

1.cross-env使用环境变量。在编译阶段，根据编译传入的变量不同，编译不同的组件。
首先，要改的是package.json的文件

"scripts": {
    "dev:gx": "cross-env BRANCH_ENV=gx node build/dev-server.js",
    "build:gx": "cross-env BRANCH_ENV=gx node build/build.js"
  },

这个时候我们编译的时候输入对应的命令就可以传入相应的环境变量。
eg：npm run dev:gx 会传入BRANCH_ENV=gx。

2.把config/prod.env.js中注入这个环境变量

module.exports = {
  NODE_ENV: ""production"",
  API_PATH:"""",
  BRANCH_ENV: JSON.stringify(process.env.BRANCH_ENV) || ""base"",
  ignoreCsrfToken:""false""
}

3.webpack.base.conf.js

  resolve: {
    extensions: ["", ".js", ".vue", ".json"],
    fallback: [path.join(__dirname, "../node_modules")],
    alias: {
      "vue$": "vue/dist/vue.common.js",
      "src": path.resolve(__dirname, "../src"),
      "assets": path.resolve(__dirname, "../src/assets/images/"+process.env.BRANCH_ENV),
      "components": path.resolve(__dirname, "../src/components"),
      "componentsDif": path.resolve(__dirname, "../src/components/"+process.env.BRANCH_ENV),
    }
  },

可以看的出，我们把编译命令注入的环境变量在引入别名的时候用上了。比如说，假设我输入的编译命令是

npm run build:gx

这个时候

"assets": path.resolve(__dirname, "../src/assets/images/"+process.env.BRANCH_ENV)
//等同于
"assets": path.resolve(__dirname, "../src/assets/images/gx")

页面引用 1.图片引用


//根据编译命令。图片引用的是src/assets/images/gx/arrow.png

background: url(~assets/btn_1.png) no-repeat;

ps:用别名的时候记得要加上~号

2.组件引用

//公共组件
import ruleTitle from "components/RuleTitle"
//差异化组件
import ruleContent from "componentsDif/RuleContent"

总结

总而言之，核心思想就是跟进编译命令传入环境变量，利用环境变量和别名的配置来差异化打包。比较难的是如何控制组件的颗粒度，如何拆分组件，这个需要跟据需求的不同来实际定制。

GPU云服务器云服务器基于webrtc的项目基于webrtc的开源项目基于php的源代码基于云计算的数据保护方案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95784.html

第三方库

摘要：微信支付，支付宝支付，银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库，使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程强大轻量的动画库 anime.js 入门教程来自B站的开源的MagicaSakura源...

seanHai 2019-08-22 13:58 评论0 收藏0
第三方库

摘要：微信支付，支付宝支付，银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库，使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程强大轻量的动画库 anime.js 入门教程来自B站的开源的MagicaSakura源...

gityuan 2019-08-29 14:17 评论0 收藏0
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
《从零构建前后分离的web项目》实战 -5分钟快速构建炒鸡规范的VUE项目骨架

摘要：可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行，可以写成可以写成看到这个画面，安装完成了。初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架我通常使用 cli 生成项目骨架再在之基础上进行个人修改。什么是 CLI 命令行界面（英语：command-li...

qieangel2013 2019-08-23 11:58 评论0 收藏0
《从零构建前后分离的web项目》实战 -5分钟快速构建炒鸡规范的VUE项目骨架

摘要：可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行，可以写成可以写成看到这个画面，安装完成了。初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架我通常使用 cli 生成项目骨架再在之基础上进行个人修改。什么是 CLI 命令行界面（英语：command-li...

kel 2019-08-19 11:10 评论0 收藏0