原文地址:

http://www.cnblogs.com/JimmyBright/p/7307486.html

通常应用程序上线都会经过开发环境、测试环境、生产环境三个阶段,三个环境通常会对应有三个不同的后端api地址或者其他的配置项。下面主要记录怎么把不同的配置项发布到不同的运行环境里边。

打开vue项目找到config目录,vue-cli生成的项目下有 dev.env.js index.js prod.env.js test.env.js四个文件

假设三个环境对应三个不同的接口访问的url前缀。

在需要访问接口地址的地方

alert(process.env.Host_url)

这样还并不能取到不同环境下的Host_url
点开config下的index.js
 // see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
}

修改第五行就可以了。

例如将项目发布到开发环境,第五行改成

 env: require('./dev.env'),
然后在控制台执行:npm run build
dist下面的项目发布之后就能取到开发环境的url
同理:
在测试环境发布,就需要将第五行改成
 env: require('./test.env'),
执行:npm run build
在生产环境发布就需要将第五行改成:
env: require('./prod.env'),
执行:npm run build 至于为什么这样改就可以了,需要稍微理解一下代码的执行顺序就明白了。O(∩_∩)O
 

Vue设置不同的环境发布程序的更多相关文章

  1. asp.net项目发布网上-当前自定义错误设置禁止远程查看应用程序

    早上服务器的系统突然出错了,悲剧~ ==============异常信息:============================== 服务器上出现应用程序错误.此应用程序的当前自定义错误设置禁止远程 ...

  2. 【WinForm】使用NSIS发布程序

    简介 NSIS(Nullsoft Scriptable Install System)是一个开源的 Windows 系统下安装程序制作程序.它提供了安装.卸载.系统设置.文件解压缩等功能 使用 以下是 ...

  3. 启动phpstyle Apache的80端口被win7的System PID=4的进程占用的解决方法 以及 如何在phpStyle里发布程序

    学习前端是,用到Ajax,php语言,操作mysql数据库,浏览器无法解析php代码(把源码输出):原因,我之前用的是tomcat服务器写jsp,servlet,php用的是apache服务器,没有配 ...

  4. 使用VBScript实现设置系统环境变量的小程序

    本人有点桌面洁癖,桌面上只放很少的东西,很多软件都用快捷键调出.最近频繁用到一个软件,我又不想放个快捷方式在桌面,也不想附到开始菜单,于是乎想将其所在目录附加到系统环境变量Path上,以后直接在运行中 ...

  5. 如何设置Java开发环境

    傻瓜式 设置Java开发环境 跟我来. 对与win7操作系统.有两种方法. 第一种: 1.下载JDK,完成安装. 2.右键我的电脑,选择属性,在左边找到高级系统设置左键单击打开,在高级选项中找到 环境 ...

  6. 升级设置win2008r2开发环境,遇到问题小结

    升级设置2008r2开发环境,是一般程序员经历的事情.许多从vs 2003,vs2005+sql2000+win2003过来,但是,时间推移,技术革新,64位的推行.架构的变化和强大.我们也只可以学习 ...

  7. Qt for Mac:发布程序(widgets和quick2)

    当你用Qt开发好程序后,是不是会很期待将你的成果分享给你的小伙伴 可是Qt的库并不是OS X标配的,所以我们要自己去复制库到app包里,才可以让app在其他未安装Qt的电脑上运行. 比较幸运的是,Qt ...

  8. WPF发布程序后未授予信任的解决办法

    WPF发布程序后未授予信任的解决办法 基于浏览器的WPF应用程序由于需要比较高的操作权限,所以在项目的安全性属性中选择了“这是完全可信的应用程序”选项.可是,在发布部署后,在其他电脑上打开xbap文件 ...

  9. 如何使用VC++6.0发布程序(即release版本程序)

    大家都知道VC编译器默认生成debug版本的程序,但是debug版本程序无法运行在没有安装VC的电脑上, 这就要就我们生成release版本的程序,因为release版本在未安装VC的电脑上也能运行( ...

随机推荐

  1. AutomaticInteger中CAS运用分析

    摘要 在接触CAS的时候虽然对它流程了解了但是对其如何解决并发问题还是一直有疑问的,所以在就选择了java中典型线程安全的AtomicInteger类进行了源码的分析. CAS简介 CAS的全称为co ...

  2. TensorFlow Python2.7环境下的源码编译(二)安装配置

    源代码树的根目录中包含了一个名为 configure 的 bash 脚本. $ ./configure 接下来,配置系统会给出各种询问,以确认编译时的配置参数.   一.重要参数解释 Do you w ...

  3. JUC——线程池

    线程池本质的概念就是一堆线程一起完成一件事情. Executor package java.util.concurrent; public interface Executor { void exec ...

  4. centos7安装vim以及在vim中显示中文

    1.centos7安装vim yum -y install vim(简单粗暴安装方法) 2.在vim中显示中文不出现乱码 (1).vim ~/.vimrc (~/.vimrc为vim配置文件) (2) ...

  5. 六、Django之表单和类视图-Part 4

    一.表单form 为了接收用户的投票选择,我们需要在前端页面显示一个投票界面.让我们重写先前的polls/detail.html文件,代码如下: <h1>{{ question.quest ...

  6. CHAPTER 5 ‘The Master of Those Who know’ Aristotle 第5章 “有识之士的大师” 亚里士多德

    CHAPTER 5 ‘The Master of Those Who know’ Aristotle 第5章 “有识之士的大师” 亚里士多德 ‘All men by nature desire to ...

  7. Azure web site和web job的config文件加密方式

    1.分析 由于Azure Web AppService平台的特殊性,所以在C#中原先的config加密方法DataProtectionConfigurationProvider和RSAProtecte ...

  8. Daily Scrum 11.19 部分测试报告

    下面是我们的部分测试报告: 功能测试部分: 1Exception in thread "Thread-11" java.lang.IllegalArgumentException: ...

  9. 实验二 Java面向对象程序设计 20135321

    课程:Java程序设计   班级:1353    姓名:余佳源  学号:20135321 成绩:             指导教师:娄嘉鹏      实验日期:2015-5-8 实验密级:       ...

  10. Chapter 5 软件工程中的形式化方法

    从广义上讲,形式化方法是指将离散数学的方法用于解决软件工程领域的问题,主要包括建立精确的数学模型以及对模型的分析活动.狭义的讲,形式化方法是运用形式化语言,进行形式化的规格描述.模型推理和验证的方法. ...