这个需求是源于我们要根据一个项目,针对某些组件(比如:日期 和 下拉组件 ) 和 页面 做终端的兼容,最终需要实现打包成2个平台:h5 和 pc
  H5平台,日期组件:                               

PC平台,日期组件:

首先,我们在 package.json-> scripts 里通过参数来区分‘平台’。建议使用 cross-env 去做平台的区分,因为我发现 vue-cli 使用起来太繁琐,需要定义.env文件来区分平台

然后:需要设置 pages 多页对象

!!!注意,【第一个坑】来了~~~~,,,这里需要根据配置的多页pages对象的key去找到相应的模版 config.plugin('html-${key}') ,而不是 config.plugin('html')

!!!注意,【第二个坑】来了~~~~,,, 这里 main.js 获取不到环境变量,因为这里的 process.env 获取到的是.env文件配置的环境变量

解决方案-1,是可以通过注入全局变量window.BUILD_APP_PLATFORM; (请看图-2

如何使用 Vue 来实现一个项目多平台打包?的更多相关文章

  1. VUE 安装&创建一个项目

    1,安装node.js vue依赖nodejs,所以首先要安装node.js 然后打开cmd,输入命令, node -v.正常出现版本号,说明你已经安装成功了 下载地址:http://nodejs.c ...

  2. 【vue+axios】一个项目学会前端实现登录拦截

    原文链接:github.com 一个项目学会vue全家桶+axios实现登录.拦截.登出功能,以及利用axios的http拦截器拦截请求和响应. 前言 该项目是利用了Github 提供的persona ...

  3. Vue+webpack构建一个项目

    1.安装CLI命令的工具  推荐用淘宝的镜像 npm install -g @vue/cli @vue/cli-init 2.使用命令构建一个名为myapp的项目 vue init webpack m ...

  4. vue如何新建一个项目

    第一步:安装node 首先下载安装node 安装步骤参考:https://www.cnblogs.com/qdwz/p/10820554.html window+R打开控制命令行cmd node -v ...

  5. 【gin-vue-admin】 使用go和vue 快速搭建一个项目模板

    gin-vue-admin gin+vue开源快速项目模板 项目地址:https://github.com/piexlmax/gin-vue-admin 增加了 micro-service-test分 ...

  6. 微服务中一个项目install打包总是失败

    在微服务的一个项目中install打包时总是报错如下: [INFO] Scanning for projects... [INFO] [INFO] -------------------------- ...

  7. Vue Create 创建一个新项目 命令行创建和视图创建

    Vue Create 创建一个新项目 命令行创建和视图创建 开始之前 你可以先 >>:cd desktop[将安装目录切换到桌面] >>:vue -V :Vue CLI 3.0 ...

  8. Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四)

    Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四) 前言 本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目,在学习Vue CLI之前我们需要先了解下webpa ...

  9. vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(上)

    其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(上) 前面我们已经学习了一个成熟的脚手架(vue-cli),笔者希望通过这个脚手架快速搭建系统(或项目).而展开搭建最好 ...

随机推荐

  1. Codis-proxy的配置和启动

    生成配置文件,即将现有的配置文件输出到指定目录位置: ./codis-proxy --default-config | tee conf/proxy.toml 修改配置文件信息: vi conf/pr ...

  2. 京东宙斯平台使用方法(accesstoken,appkey,appsecret参数和SDK的获取)

    1.注册成为开发者 链接:https://dev.jd.com/ 2.创建应用 3.获取appsrecet和appkey,SDK(获取) 新建应用之后在左边应用证书栏位可以查看到appkey,apps ...

  3. python字典推导式 - python基础入门(17)

    在昨天的文章中,我们介绍了关于python列表推导式 的使用,字典推导式使用方法其实也类似,也是通过循环和条件判断表达式配合使用,不同的是字典推导式返回值是一个字典,所以整个表达式需要写在{}内部. ...

  4. Detect cycle in a directed graph

    Question: Detect cycle in a directed graph Answer: Depth First Traversal can be used to detect cycle ...

  5. redis批量删除键的操作

    网上也有很多关于批量删除的命令,例如,我们要删除以KEY开头的键.linux系统中当屏幕显示127.0.0.1:6379时,采用如下命令 redis-cli -h 192.168.1.1 -p 637 ...

  6. ConcurrentHashMap能完全替代HashTable吗?

    至此你应该能够明白,ConcurrentHashMap与HashTable都可以用于多线程的环境,但是当Hashtable的大小增加到一定的时候,性能会急剧下降,因为迭代时需要被锁定很长的时间.因为C ...

  7. iOS开发支付篇——内购(IAP)详解

    1 <em>内购所需要的资料整理总结,史上最完整的,哈哈哈哈哈哈</em> 思维导图 重点总结: 1 2 3 4 5 6 7 8 9 10 11 12 13 1.获取内购列表( ...

  8. java 用户线程和守护线程

    在Java中通常有两种线程:用户线程和守护线程(也被称为服务线程)通过Thread.setDaemon(false)设置为用户线程通过Thread.setDaemon(true)设置为守护线程线程属性 ...

  9. SAS学习笔记39 MINOPERATOR | NOMINOPERATOR

    MINOPERATOR(可理解为Macro IN Operator的简写,帮助大家记忆)系统选项用于控制是否在宏程序中是否可以用IN操作符或#操作符,默认值为NOMINOPERATOR.需要注意的是, ...

  10. Lieges of Legendre CodeForces - 603C (博弈论,SG找规律)

    大意: 给定$n$堆石子, 两人轮流操作, 每次操作两种选择 $(1)$任选非空堆拿走一个石子 $(2)$任选石子数为$2x(x>0)$的一堆, 替换为$k$堆$x$个石子. ($k$给定) 最 ...