热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

根据不同环境使用VueCLI进行打包配置优化

根据不同环境需求,利用VueCLI的`npmrunbuild`命令对项目进行定制化打包,如测试、预发布和生产环境。通过配置`process.env`变量,实现不同环境下接口和服务的动态切换,确保应用在各阶段都能高效运行和调试。

根据项目需要,通过vue-cli中的npm run build 打包到不同的环境,例如测试环境,预发布环境,线上环境,根据process.env分别进行接口的调用

vue-cli 中build中build.js

require('./check-versions')()

// process.env.NODE_ENV = 'production'

var ora = require('ora')
var rm = require('rimraf')
var path = require('path')
var chalk = require('chalk')
var webpack = require('webpack')
var cOnfig= require('../config')
var webpackCOnfig= require('./webpack.prod.conf')

var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
// var spinner = ora('building for production...')
// spinner.start()

build中webpack.prod.conf.js

const env = config.build[process.env.env_config+'Env']
// const env = process.env.NODE_ENV === 'testing'
//   ? require('../config/test.env')
//   : require('../config/prod.env')

config中的index.js 

module.exports = {
    build: {
        prodEnv: require('./prod.env'), // 线上环境
        sitEnv: require('./sit.env'), // 测试环境
        ppeEnv: require('./ppe.env'), // 预发布环境
        ……

config中 dev.env.js 
开发环境用的是测试接口,通过merge进行拷贝

var merge = require('webpack-merge')
var sitEnv = require('./sit.env')

module.exports = merge(sitEnv, {
  NODE_ENV: '"development"'
})

在config中新建sit.env.js、ppe.env.js

module.exports = {
  NODE_ENV: '"sitEnvironment"',
  ENV_CONFIG: '"sit"',
  BASE_API: '"http://*****"' // 测试环境地址
}
module.exports = {
  NODE_ENV: '"ppeEnvironment"',
  ENV_CONFIG: '"ppe"',
  BASE_API: '"http://******"' // 预发布环境地址
}

安装cross-env

npm install cross-env -D

package.json

 "scripts": {
   "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"build:prod": "cross-env NODE_ENV=production env_cOnfig=prod node build/build.js",
"build:ppe": "cross-env NODE_ENV=ppeEnvironment env_cOnfig=ppe node build/build.js", "build:sit": "cross-env NODE_ENV=sitEnvironment env_cOnfig=sit node build/build.js",
   "lint": "eslint --ext .js,.vue src",
"test": "npm run lint" },

打包时候我们只需要

npm run build:sit // 测试环境
npm run build:ppe // 预发布环境
npm run build:prod // 线上环境

 


推荐阅读
  • 本文深入探讨了 Java 中的 Serializable 接口,解释了其实现机制、用途及注意事项,帮助开发者更好地理解和使用序列化功能。 ... [详细]
  • DNN Community 和 Professional 版本的主要差异
    本文详细解析了 DotNetNuke (DNN) 的两种主要版本:Community 和 Professional。通过对比两者的功能和附加组件,帮助用户选择最适合其需求的版本。 ... [详细]
  • Scala 实现 UTF-8 编码属性文件读取与克隆
    本文介绍如何使用 Scala 以 UTF-8 编码方式读取属性文件,并实现属性文件的克隆功能。通过这种方式,可以确保配置文件在多线程环境下的一致性和高效性。 ... [详细]
  • 微软Exchange服务器遭遇2022年版“千年虫”漏洞
    微软Exchange服务器在新年伊始遭遇了一个类似于‘千年虫’的日期处理漏洞,导致邮件传输受阻。该问题主要影响配置了FIP-FS恶意软件引擎的Exchange 2016和2019版本。 ... [详细]
  • 深入理解Redis的数据结构与对象系统
    本文详细探讨了Redis中的数据结构和对象系统的实现,包括字符串、列表、集合、哈希表和有序集合等五种核心对象类型,以及它们所使用的底层数据结构。通过分析源码和相关文献,帮助读者更好地理解Redis的设计原理。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 本文详细探讨了Java中的24种设计模式及其应用,并介绍了七大面向对象设计原则。通过创建型、结构型和行为型模式的分类,帮助开发者更好地理解和应用这些模式,提升代码质量和可维护性。 ... [详细]
  • XNA 3.0 游戏编程:从 XML 文件加载数据
    本文介绍如何在 XNA 3.0 游戏项目中从 XML 文件加载数据。我们将探讨如何将 XML 数据序列化为二进制文件,并通过内容管道加载到游戏中。此外,还会涉及自定义类型读取器和写入器的实现。 ... [详细]
  • UNP 第9章:主机名与地址转换
    本章探讨了用于在主机名和数值地址之间进行转换的函数,如gethostbyname和gethostbyaddr。此外,还介绍了getservbyname和getservbyport函数,用于在服务器名和端口号之间进行转换。 ... [详细]
  • 本文深入探讨了Linux系统中网卡绑定(bonding)的七种工作模式。网卡绑定技术通过将多个物理网卡组合成一个逻辑网卡,实现网络冗余、带宽聚合和负载均衡,在生产环境中广泛应用。文章详细介绍了每种模式的特点、适用场景及配置方法。 ... [详细]
  • 本文详细解析了Python中的os和sys模块,介绍了它们的功能、常用方法及其在实际编程中的应用。 ... [详细]
  • 本文介绍了如何通过 Maven 依赖引入 SQLiteJDBC 和 HikariCP 包,从而在 Java 应用中高效地连接和操作 SQLite 数据库。文章提供了详细的代码示例,并解释了每个步骤的实现细节。 ... [详细]
  • 实体映射最强工具类:MapStruct真香 ... [详细]
  • 在Python开发过程中,随着项目数量的增加,不同项目依赖于不同版本的库,容易引发依赖冲突。为了避免这些问题,并保持开发环境的整洁,可以使用Virtualenv和Virtualenvwrapper来创建和管理多个隔离的Python虚拟环境。 ... [详细]
  • 优化局域网SSH连接延迟问题的解决方案
    本文介绍了解决局域网内SSH连接到服务器时出现长时间等待问题的方法。通过调整配置和优化网络设置,可以显著缩短SSH连接的时间。 ... [详细]
author-avatar
Gvyi_262
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有