这个需求是源于我们要根据一个项目,针对某些组件(比如:日期 和 下拉组件 ) 和 页面 做终端的兼容,最终需要实现打包成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. php 云片国外短信实例

    <?php namespace Ruifi\App; class SmsL { public function smsIcode($moblie,$sms_code,$intl_code){ h ...

  2. 基于Spring Boot的可直接运行的分布式ID生成器的实现以及SnowFlake算法详解

    背景 最近对snowflake比较感兴趣,就看了一些分布式唯一ID生成器(发号器)的开源项目的源码,例如百度的uid-generator,美团的leaf.大致看了一遍后感觉uid-generator代 ...

  3. 《ucore lab1 exercise2》实验报告

    资源 ucore在线实验指导书 我的ucore实验代码 题目:使用qemu执行并调试lab1中的软件 为了熟悉使用qemu和gdb进行的调试工作,我们进行如下的小练习: 从CPU加电后执行的第一条指令 ...

  4. Laravel-admin图片本地上传配置问题

    先打开config/filesystems.php 修改添加其中的 'admin' => [ 'driver' => 'local', 'root' => public_path(' ...

  5. time() 函数时间不同步问题

    1.时区设置问题 处理方法:编辑php.ini  搜索 “timezone” 改写为 PRC 时区 2.服务器时间不同步 处理方法:设置服务器时间和本地时间进行同步

  6. MySQL之锁、事务、优化、OLAP、OLTP

    本节目录 一 锁的分类及特性 二 表级锁定(MyISAM举例) 三 行级锁定 四 查看死锁.解除锁 五 事务 六 慢日志.执行计划.sql优化 七 OLTP与OLAP的介绍和对比 八 关于autoco ...

  7. Golang mgo 模糊查询的使用

    在日常使用的Mongodb中,有一项功能叫做模糊查询(使用正则匹配),例如: db.article.find({"title": {$regex: /a/, $options: & ...

  8. 字符串模式匹配算法——BM、Horspool、Sunday、KMP、KR、AC算法

    ref : https://dsqiu.iteye.com/blog/1700312 本文内容框架: §1 Boyer-Moore算法 §2 Horspool算法 §3 Sunday算法 §4 KMP ...

  9. 动手篇:简单的注册界面与防SQL注入(续)

    注册前先判断用户名是否已经存在,通过if (SqlHelper.Exists(strSql))查询判断是否已经存在.没存在则进行一个数据插入数据库操作 string strSql1 = string. ...

  10. What's new in C# 7.0

    1.数字分隔符(Digit Separators ) 数字分隔符使代码更具可读性.在声明变量时,可以将_添加到单独的数字中.编译器只删除_.以下代码片段在C#7中看起来更具可读性: In C# 6 l ...