vuejs添加环境常量----多环境开发打包场景解决方案之一

arashicage 发布于2019-08-22 17:19 / 2906人阅读

摘要：更新目前已经提供环境变量配置了，建议直接使用。前言构建的项目没有标配的环境依赖，只区分开发模式单元测试模式和生产模式。更改环境需要手动修改解决思路利用对象，获取启动进程时的命令行参数匹配当前开发或生产的环境常量挂载到。

2018/8/24更新：
目前VUE CLI 3.0 已经提供环境变量配置了，建议直接使用。

前言

vue-cli构建的项目没有angular-cli标配的environments环境依赖，只区分开发模式、单元测试模式和生产模式。

//config
dev.env.js
test.env.js
prod.env.js

一个项目的开发调试过程肯定不止开发环境和生产环境，由于缺少环境常量，开发人员常常需要手动修改BASE_URL，进而导致如果项目存在多个环境时，多出的环境没办法自动化构建。

axios.defaults.baseURL = "http://xxx.xxx.xx.xx/" //更改环境api需要手动修改

解决思路

利用process对象，获取启动Node.js进程时的命令行参数（process.argv）,匹配当前开发或生产的环境常量挂载到process.env。

具体实现

/config
添加env-config.js文件

"use strict"

const chalk = require("chalk")
/*
* 环境列表，第一个环境为默认环境
* envName: 指明现在使用的环境
* dirName: 打包的路径，只在build的时候有用
* baseUrl: 这个环境下面的api 请求的域名
* assetsPublicPath: 静态资源存放的域名，未指定则使用相对路径
* */
const ENV_LIST = [
    {
        envName: "dev",
        dirName: "dev",
        baseUrl: "http://192.168.xx.xx:8000/",
        assetsPublicPath:"./"
    },
    {
        envName: "test",
        dirName: "test",
        baseUrl: "http://192.168.xx.xx:8000/",
        assetsPublicPath: "./"
    },
    {
        envName: "pro",
        dirName: "pro",
        baseUrl: "http://webapi.xxx.com/",
        assetsPublicPath:"./"
    },

]

//获取命令行参数 http://nodejs.cn/api/process.html#process_process_argv
const argv = JSON.parse(process.env.npm_config_argv).original || process.argv
const HOST_ENV = argv[2] ? argv[2].replace(/[^a-z]+/ig,"") : ""
//没有设置环境，则默认为第一个
const HOST_CONF = HOST_ENV  ? ENV_LIST.find(item => item.envName === HOST_ENV) : ENV_LIST[0] 
// 把环境常量挂载到process.env.HOST_ENV方便客户端使用
process.env.BASE_URL = HOST_CONF.baseUrl
// log选中的变量
console.log(chalk.green("当前环境常量："))
console.log(HOST_CONF)

module.exports.HOST_CONF = HOST_CONF
module.exports.ENV_LIST = ENV_LIST

//build/webpack.base.conf.js 通过webpack传入客户端中

  plugins: [
    new webpack.DefinePlugin({
      "process.env.BASE_URL": """ + process.env.BASE_URL + """
    })
  ],

具体使用

指定开发时的环境，默认为dev环境，envName为config/env-config.js配置的环境常量，对应的process.env.BASE_URL的值就是对应的ENV_LIST中的baseUrl

npm run dev --[envName]

指定环境打包,输出至dist/[envName]

npm run build --[envName]

//打包测试环境

//本地调试生产环境

打包所有环境

/package.json “script"

 "build-all": "npm run build --dev && npm run build --test && npm run build --pro"

目前发现的问题

命令行参数（process.argv）有保留关键字或者是被占用的，如prod,需要注意规避。

超融合服务器 idc机房托管添加net环境添加java环境变量多租户环境多线程环境

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95062.html

基于vue+mint-ui的mobile-h5的项目说明

摘要：把打包的目录修改成生产环境需要的目录。是域名的配置只要统一配置一项即可，方便。旨在增强团队开发协作提高代码质量和打造开发基石的编码规范，以下规范是团队基本约定的内容，必须严格遵循。 Vue作为前端三大框架之一，其已经悄然成为主流，学会用vue相关技术来开发项目会相当轻松。对于还没学习或者还没用过vue的初学者，基础知识这里不作详解，推荐先去相关官网，学习一下vue相关的基础知识。 a...

vboy1010 2019-08-23 10:25 评论0 收藏0
Vue.js学习

摘要：一基础学习模式下图不仅概括了模式，还描述了在中是如何和以及进行交互的。关于这一点我们将在后续反应系统中讨论。父组件通过向下传递数据给子组件，子组件通过给父组件发送消息。这个对象必须是普通对象原生对象，及原型属性会被忽略。 Vue.js 是用于构建交互式的 Web 界面的库。Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。其实和Jquery一样...

TIGERB 2019-08-21 14:15 评论0 收藏0
架构师之路

摘要：因为用户不用在第一次进入应用时下载所有代码，用户能更快的看到页面并与之交互。译高阶函数利用和来编写更易维护的代码高阶函数可以帮助你增强你的，让你的代码更具有声明性。知道什么时候和怎样使用高阶函数是至关重要的。 Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示) 稍微改改都能直接拿来用~~~哟吼吼,哟吼吼..... 如何无痛降低 if else 面...

NikoManiac 2019-08-22 11:22 评论0 收藏0
VueJS 开发常见问题集锦

摘要：由于公司的前端开始转向，最近开始使用这个框架进行开发，遇到一些问题记录下来，以备后用。查了一下，发现可能是打包或是资源引用问题，目前该问题还未被妥善处理，需要通过一些来解决这个问题。为解决这个问题，中提供了方法对象受现 showImg(https://segmentfault.com/img/bVFgor?w=1280&h=720); 由于公司的前端开始转向 VueJS，最近开始使用这...

hedge_hog 2019-08-20 18:07 评论0 收藏0
为什么我们要做三份 Webpack 配置文件

摘要：时至今日，已经成为前端工程必备的基础工具之一，不仅被广泛用于前端工程发布前的打包，还在开发中担当本地前端资源服务器模块热更新等角色，结合等代码检查工具，还可以实现在对源代码的严格校验检查。时至今日，Webpack 已经成为前端工程必备的基础工具之一，不仅被广泛用于前端工程发布前的打包，还在开发中担当本地前端资源服务器（assets server）、模块热更新（hot module repla...

silencezwm 2019-04-23 13:43 评论0 收藏0