Vue多环境配置

大家都知道,使用vue-cli脚手架生成的Vue项目只有开发环境和生产环境,然而在实际开发中,用到的不止这些环境,还包括测试环境,准生产环境等等。所以需要自己添加没有的环境。

以测试环境为例,配置如下:

第一步:

package.json文件下scripts节点对象中新增一条属性。

"test": "node build/build-test.js"

第二步:

在build文件夹下复制一份build.js,重命名为build-test.js。

修改build-test.js中的参数。

第三步:

在build文件夹下复制一份webpack.prod.conf.js,重命名为webpack.test.conf.js。

修改webpack.test.conf.js中的参数。

第四步:

修改webpack.base.conf.js中的参数。

修改vue-loader.conf.js中的参数。

第五步:

在config文件夹下复制一份prod.env.js,重命名为test.env.js。

修改test.env.js中的参数。

第五步:

各个环境全局参数配置

新建global.js,配置全局参数

在main.js中设置全局配置时,不可使用global做属性名,vue.prototype中已包含只读的global,需注意!!!

global.js

// 全局参数配置
export default {
NODE_ENV: process.env.NODE_ENV,
HTTP_API_URL: process.env.BASE_URL,
WS_API_URL: process.env.WS_BASE_URL,
WX_STATIC_URL: process.env.WX_STATIC_URL,
SHARE_URL: process.env.SHARE_URL
}

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import global from '@/global/global' // 全局参数配置
Vue.prototype.globalParams = global /* eslint-disable no-new */
const app = new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
}) export default app

使用全局参数

this.globalParam.HTTP_API_URL

多环境启动打包命令:

开发环境:

npm run dev

测试环境:

npm run test

生产环境:

npm run build

   感谢阅读!!!

Vue多环境配置的更多相关文章

  1. 【前端】vue.js环境配置以及实例运行简明教程

    vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...

  2. Vue 不同环境配置相应的 API 地址

    我使用的是 Vue + ElementUI 进行构建的项目,在开发过程中,使用的是前后端分离的模式,所以经常会出现多环境配置信息,尤其是 Api 接口地址的配置,如果在代码中使用判断的方式,感觉不友好 ...

  3. weex和vue开发环境配置详解(配置系统变量等等)

    本文详细讲解如何搭建weex和vue开发环境 安装java 现在java安装包,网上的安装包都是国外的,很难下载下来 就用这个链接下载,亲测无毒,http://www.wmzhe.com/soft-3 ...

  4. vue开发环境配置跨域,一步到位

    本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...

  5. VUE开发--环境配置(一)(转)

    无剑_君关注 0.312019.05.09 11:53:43字数 1,073阅读 19,627        https://www.jianshu.com/p/a494417def99?utm_so ...

  6. vue开发环境配置

    一.开发工具 Visual Studio Code 二.环境搭建 vue推荐开发环境: Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nod ...

  7. Vue.js环境配置

    一.安装node.js 自行下载安装 https://nodejs.org/en/ 二.查看版本,更新版本 查看node版本 node --version 查看npm版本 npm --version ...

  8. vue的环境配置

    在vue越来越火的情况下,本人也开始加入到大军当中. 首先,列举下我们需要的东西: node.js 环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 安装node.j ...

  9. vue:不同环境配置不同打包命令

    修改prod.env.js 'use strict'const target = process.env.npm_lifecycle_event;if (target == 'build') { // ...

随机推荐

  1. redis下载及安装服务

    1 . 要安装Redis,首先要获取安装包. Windows的Redis安装包需要到以下GitHub链接找到. 链接:https://github.com/MSOpenTech/redis 打开网站后 ...

  2. event loop笔记

    注意四个对象: 主进程 执行栈 异步进程 任务队列 1.主进程读取js代码,形成对应的堆和执行栈(此时在同步环境) 2.当遇见异步任务,转交给异步进程进行处理 3.异步任务完成,将其推入任务队列 4. ...

  3. 【css学习整理】css基础(样式,语法,选择器)

    CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...

  4. Spring 4.3 的新功能和增强

    转载自https://my.oschina.net/waylau/blog/698186 核心容器改进 核心容器额外提供了更丰富的元数据来改进编程. 默认 Java 8 的方法检测为 bean 属性的 ...

  5. axios无法在ie9,10,11环境下运行的问题解决

    npm install es6-promise --save-dev import promise from 'es6-promise'; promise.polyfill();

  6. laravel基础课程---13、数据库基本操作2(lavarel数据库操作和tp对比)

    laravel基础课程---13.数据库基本操作2(lavarel数据库操作和tp对比) 一.总结 一句话总结: 非常非常接近:也是分为两大类,原生SQL 和 数据库链式操作 学习方法:使用时 多看手 ...

  7. C# 多线程、控制线程数提高循环输出效率

    C#多线程及控制线程数量,对for循环输出效率. 虽然输出不规律,但是效率明显提高. 思路: 如果要删除1000条数据,只使用for循环,则一个接着一个输出.所以,把1000条数据分成seed段,每段 ...

  8. Zabbix数据库清理历史数据

    Zabbix清理历史数据 Zabbix是个很好的监控软件,随着公司监控项目越来越多,数据越来越多,zabbix负载重,可能造成系统性能下降. Zabbix里面最大的表就是历史记录表,history,h ...

  9. CF785CAnton and Permutation(分块 动态逆序对)

    Anton likes permutations, especially he likes to permute their elements. Note that a permutation of  ...

  10. 「HNOI2008」「LuoguP3197」越狱(数论

    题目描述 原题来自:HNOI 2008 监狱有连续编号为 111 到 nnn 的 nnn 个房间,每个房间关押一个犯人.有 mmm 种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人信仰的宗教相同, ...