vue大型项目拆分_vue 一套代码支持多个项目

参考:https://segmentfault.com/a/1190000015424032

一:根据不同的环境变量运行差异化不太大的不同项目

1.安装cross-env包

cross-env能跨平台地设置及使用环境变量

npm install cross-env --save-dev

2.设置一个变量 在编译阶段,根据编译传入的变量不同,编译不同的组件

修改package.json里的运行、打包命令(根据文件名进行运行、打包)

3.修改config下面的prod.env.js配置文件

4.组件的拆分:把共用的组件拆分成一个一个的组件

目录结构:

5.根据项目的不同创建不同的文件

每个文件里面进行组件的重组以及差异化的东西

设置路由文件的时候根据环境变量引入

二:路由模块化(根据路由文件配置的不同来决定哪个功能)

例如一共有两个功能,停车功能、商场售票功能。有的商场两个功能都有,有的只有其中的一个

把负责不同功能的路由写到两个文件中 shop.js park.js

然后在router的index.js中进行整合

根据功能的不同配置不同的routes

注:只要import这个路由就算routes里面不配置npm run build打包之后打包文件里还是会有这个功能的代码  目前就只能使用功能的时候在import引入路由 避免打包进去不需要的代码 还没想到更好的实现方式

原文:https://www.cnblogs.com/jamie-web/p/9983606.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值