VUE 利用webpack 给生产环境和发布环境配置不同的接口地址

第一步,分别设置不同的接口地址

首先,我们分别找到下面的文件:

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

其实,这两个文件就是针对生产环境和发布环境设置不同参数的文件。我们打开dev.en.js文件。代码如下:

var merge = require(‘webpack-merge‘)
var prodEnv = require(‘./prod.env‘)

module.exports = merge(prodEnv, {
  NODE_ENV: ‘"development"‘
})

我们在NODE_ENV下面增加一项,代码如下:

var merge = require(‘webpack-merge‘)
var prodEnv = require(‘./prod.env‘)

module.exports = merge(prodEnv, {
  NODE_ENV: ‘"development"‘,
  API_ROOT: ‘"//192.168.1.8/api"‘
})

prod.env.js文件修改为:

module.exports = {
  NODE_ENV: ‘"production"‘,
  API_ROOT: ‘"//www.baidu.com/api"‘
}

第二步,在代码中调用设置好的参数

以我们之前的演示代码为例。你自己的项目请根据你自己的情况调整。以下文件和代码仅供参考。
我们打开src/config/api.js文件,将原来开头的代码

// 配置API接口地址
var root = ‘https://cnodejs.org/api/v1‘

修改为:

// 配置API接口地址
var root = process.env.API_ROOT

然后就完成了我们的配置工作。最后,重启项目,就能使新配置的接口地址生效了。

npm run dev
npm run build

在main.js区分生产与开发环境

process.env.NODE_ENV == ‘production‘;  //生产环境
process.env.NODE_ENV == ‘development‘; //开发环境

参考地址:http://blog.csdn.net/fungleo/article/details/54574049

原文地址:https://www.cnblogs.com/moqiutao/p/8461665.html

时间: 2024-10-29 04:43:51

VUE 利用webpack 给生产环境和发布环境配置不同的接口地址的相关文章

vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。

废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.env.js 我们需要做配置的就是第一个和第三个. 其实这两个文件内容就是针对生产环境和发布环境设置不同的参数的文件,那么打开dev.en.js,开发环境.原本代码如下: 'use strict' const merge = require('webpack-merge') const prodEnv

vue-cli 利用 webpack 给生产环境和发布环境配置不同的接口地址的三种方法

第一种方法: 在/config/dev.env.js下配置如下 在/config/prod.env.js下配置如下 已经分别设定路径,接下来就是如何调用的问题了. 原来api文件里代码如图所示 修改为 然后就完成了我们的配置工作.最后,重启项目,就能使新配置的接口地址生效了. 在经过这样的配置之后,我们在运行 npm run dev 的时候,跑的就是开发环境的接口.而我们运行 npm run build 打包项目的时候,打包的是服务器正式接口,我们就不用调来调去得了. 第二种方法: 可以使用 "

开发环境和发布环境切换以方便测试

需求:点击某个地方触发事件,可以自由的切换测试.预生产.生产三种环境. 原理:用NSUserDefault或者Singleton去维护环境变量集合. 宏定义配置 /***************单例模式宏**************/ #define MACRO_SHARED_INSTANCE_INTERFACE +(instancetype)sharedInstance; #define MACRO_SHARED_INSTANCE_IMPLEMENTATION(CLASS) \ +(insta

IdentityServer4:发布环境的数字签名证书

一,jwt的三个组成部件 先来看一个由IdentityServer颁发的一个标准令牌 eyJhbGciOiJSUzI1NiIsImtpZCI6IjBiNTE3ZjIzYWY0OGM4ZjkyZjExMzM5MDMwZTI5NDkwIiwidHlwIjoiSldUIn0.eyJuYmYiOjE1Njk4MDUxNzgsImV4cCI6MTU2OTgwNTQ3OCwiaXNzIjoiaHR0cDovL2xvY2FsaG9zdDo1MDAwIiwiYXVkIjoiYXBpQ2xpZW50SHlicml

Vue项目webpack打包部署到服务器

Vue项目webpack打包部署到服务器 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.[js](http://lib.csdn.net/base/javascript "JavaScript知识库"),我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'变为了./,然后我就执行了npm run buil

手游公司运维之利用Rundeck自动化运维工具和Shell脚本构建测试环境代码发布平台和生产环境代码发布平台

在做手游运维工作之前,我接触的代码发布都是常规的软件发布,有固定的发布周期.之前工作的那个外企有严格的发布周期,一年中的所有发布计划都是由Release Manager来控制,每次发布之前都需要做一些准备工作,如填写发布表单,上传发布需要的资源文件,联系发布过程中的相关人员,如开发和测试.最后在公司内部开发的发布平台上按照指定的时间点击鼠标对一个集群内的几台主机或全部主机进行代码发布.这个发布平台还是基于rsync服务实现的.虽然每个星期都有各种服务的发布,但是整个发布流程是可以控制的,并且发布

利用webpack搭建的前端工程化环境

随着webpack3.x的发布,其功能也越来越强大,很多的项目的编译打包工具也由gulp逐渐转移到webpack.最近因为项目重构考虑使用使用vue,同时想从原来的gulp切换到webpack,所以搭建了webpack-vue的前端脚手架工具,这里记录下搭建的过程中的要点.项目源码 1. 用yarn代替npm npm是一款非常好的包管理工具,之前在用npm安装项目依赖的时候总会因为某些依赖包推出了新版本从而导致编译结果不一样的问题,这是因为在安装依赖的时候npm并没有锁定依赖包的版本号(npm5

vue+node+webpack搭建环境

一.环境搭建 1.1.去官网安装node.js( http://www.runoob.com/nodejs/nodejs-install-setup.html  ) 注意node的版本,只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错.推荐最新版本. 下载安装包之后直接点击安装即可.测试安装成功的界面如下: 1.2.利用npm安装webpack 命令行语句为npm install webpack -g  .测试安装成功的界面如下: 1.3.下面就是安装淘宝镜

升级生产服务器运行环境来发布网站

生产服务器运行环境: 操作系统:Windows Server 2008 Web服务器:IIS 7.0 任务:发部ASP.NETT程序 准备工作: 该发布程序是在.net 4.0的开发环境运行,但我们的服务器是.net 2.0的运行环境 在发布该程序之前,必须要安装.net4.0环境,并配置好IIS7.0环境 操作步骤: 1.下载.net 4.0安装: https://www.microsoft.com/zh-cn/download/confirmation.aspx?id=17718 2.发布程