这个需求是源于我们要根据一个项目,针对某些组件(比如:日期 和 下拉组件 ) 和 页面 做终端的兼容,最终需要实现打包成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. 一篇搞定Java过滤器

    Filter:过滤器 引言 我们可以通过使用前面的技术,做出一些简单的登陆注册以及配合数据库实现对数据增删改查的Demo,程序是基本运行起来了,但是却存在着一个重大的安全问题,那就登陆权限验证,一般来 ...

  2. 通过JAX-WS实现WebService

    (一)服务端的创建 一,首先创建一个Web 项目,或者创建一个Web Service项目也行(差别就是后者在开始就设置了Web Service的调用方式) 二,在项目中创建一个类作为我们要发布的服务( ...

  3. 【Pandas数据分析案例】2018年北京积分入户情况分析

    据说,北京落户的难度比加入美国国籍还高.而北京2018年首次实行积分入户制,让我们来分析一下首批通过积分入户拿到北京户口的数据. 首先从北京积分落户官网下载公示名单: 根据表格中的信息,我们主要从以下 ...

  4. 关于Python的导入覆盖解决办法

    这种问题一般来说还是不会引起的,可能会出现在datetime和time这样类型的模块中. 例如: import datetime from datetime import datetime 如果写在一 ...

  5. CentOS7离线安装Mysql(详细安装过程)

    Mysql安装 下载mysql离线安装包 https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.27-1.el7.x86_64.rpm-bundle ...

  6. 为什么用JS取不到cookie的值?解决方法如下!

    注意:cookie是基于域名来储存的.要放到测试服务器上或者本地localhost服务器上才会生效.cookie具有不同域名下储存不可共享的特性.单纯的本地一个html页面打开是无效的. 明明在浏览中 ...

  7. (一)ORM基础

    一.ORM思想解析 要了解学习Hibernate框架,就不得不提到ORM思想,因为Hibernate就是基于ORM思想的一个产品. 1.1 介绍 广义上,ORM指的是面向对象的对象模型和关系型数据库的 ...

  8. (一)weblogic11g的安装配置

    一.安装 找到weblogic安装包,小编这里用的是wls1034_win32.exe版本,双击打开 完成后运行快速启动,打开快速启动界面,配置weblogic.如果没有打开,还可以在开始菜单中找到q ...

  9. 怎样用sql语句复制表table1到表table2的同时复制主键

    原文:怎样用sql语句复制表table1到表table2的同时复制主键 在从table1表复制到table2的时候,我们会用语句: select * into table2 from table1 但 ...

  10. SQL优化中的重要概念:阻塞

    原文:SQL优化中的重要概念:阻塞 上一篇讲到锁定的概念,那么接下来就是如何找到由于锁定而发生阻塞的进程,并解决阻塞问题. 1.会话1,修改数据,但没有提交事务 BEGIN TRAN select @ ...