vue-cli生成的项目配置开发和生产环境不同的接口
vue-cli生成的项目,vue项目配置了不同开发环境的接口地址,axios.defaults.baseURL如何引用这个地址,这是在我发布项目的时候考虑的,于是想到了
方法一:
config下配置文件分别如下:
dev.env.js: 'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env') module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_ROOT: '"//xxx.xxx.xxx.xxx:9001"'
})
prod.env.js 'use strict'
module.exports = {
NODE_ENV: '"production"',
API_ROOT: '"https://xxx.zzz.com"'
}
我在app.vue和main.js中试了以下方法,可以生效,但是因为在配置API_ROOT的时候里面地址带双引号,所以不能直接使用该接口地址,如果去掉API_ROOT中的双引号,打包的时候又会报错。
const config = require('../config')
import axios from 'axios';
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = config.dev.env.API_ROOT;
} else {
axios.defaults.baseURL = config.build.env.API_ROOT;
}
所以暂时没想到该怎么解决这个问题…………遂放弃方法一。
方法二:(集热心网友提供的方案)
一般项目webpack
会有两个或多个配置文件,如:webpack.prod.conf.js
对应线上打包webpack.dev.conf.js
对应开发环境
使用webpack.DefinePlugin
就可以
开发环境(webpack.dev.conf.js): //开发环境下的baseURL
new webpack.DefinePlugin({
BASE_URL:"'xxxxxxxxx'"
})
线上环境(webpack.prod.conf.js): //线上环境下的baseURL
new webpack.DefinePlugin({
BASE_URL:"'xxxxxxxxx'"
})
我们只需要在入口文件中写上:axios.defaults.baseURL = BASE_URL;
即可。
通过配置了DefinePlugin,那么这里面的标识就相当于全局变量,你的业务代码可以直接使用配置的标识。
注意:这里配置
BASE_URL
属性值的时候要单独给里面的值再加一个引号,否则输出的值不是字符串,所以会报错。
vue-cli生成的项目配置开发和生产环境不同的接口的更多相关文章
- https://www.cnblogs.com/beileixinqing/p/7724779.html vue-cli生成的项目配置开发和生产环境不同的接口 vue-cli生成的项目,vue项目配置了不同开发环境的接口地址,axios.defaults.baseURL如何引用这个地址,这是在我发布项目的时候考虑的,于是想到了
方法二:(集热心网友提供的方案) 一般项目webpack会有两个或多个配置文件,如: webpack.prod.conf.js 对应线上打包 webpack.dev.conf.js 对应开发环境 使用 ...
- spring 项目分开发和生产环境
1.pom 文件修改 <profile> <!-- 本地开发环境 --> <id>dev</id> <properties> <pro ...
- @vue/cli 3.x项目脚手架 webpack 配置
@vue/cli 是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli 基于node服务 需要8.9以上版本 可以使用 nvm等工具来控制node版本 构建于 webpack ...
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- VUE cli 4.x下配置多页面以及同时配置支持element-ui及mint-ui并且优化首页文件大小。
场景,公司的一个小型项目,需同时支持移动端和PC端.最开始考虑做两个独立的项目.但后来考虑到总共只有4个功能页面,布署起来相对麻烦.所以决定做在一个项目里. 1.升级vue-cli到4.x npm i ...
- vsCode怎么为一个前端项目配置ts的运行环境
vsCode为一个前端项目配置ts的运行环境,ts文件保存的时候自动编译成js文件: 假设此前端项目名称为Web:文件结构如图 1. 在根目录中新建一个“.vscode”文件夹,里面建一个“tasks ...
- Node JS后端项目开发与生产环境总结
原文地址:Node JS后端项目开发与生产环境总结 Node JS常用后端框架有express.koa.sails.国产框架有个egg js,已经在cnode投入生产了,还有个think js,类似t ...
- spring boot--日志、开发和生产环境切换、自定义配置(环境变量)
Spring Boot日志常用配置: # 日志输出的地址:Spring Boot默认并没有进行文件输出,只在控制台中进行了打印 logging.file=/home/zhou # 日志级别 debug ...
- 从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么
浏览文章前 这一期,我分享给大家三点看源码的小技巧,这也是从别的大佬那总结的. 被反复使用的代码 这样的代码是一个软件的重点函数,一个大神的写法有很多精华值得学习. 穿越时间的代码 如果一段代码10年 ...
随机推荐
- Python os.popen() 方法
简述 就是新建一个管道执行一个命令. 方法是os.popen(命令,权限,缓冲大小) 比如 a = 'mkdir def' b = os.popen(a,) print b 就是等同于使用命令去创建了 ...
- [转]【MyBatis】Decimal映射到实体类出现科学计数法问题
原文地址:https://blog.csdn.net/harwey_it/article/details/80269388 问题: Mybatis查询Decimal字段映射到实体类后,出现科学计数法的 ...
- Laravel Eloquent使用小记
原文地址:http://blog.onlywan.cc/14843810761202.html Laravel Eloquent使用小记 今天由于开发数据库业务中间层须要.開始研究Laravel El ...
- web前端开发与iOS终端开发的异同[转]
* {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-fami ...
- Android文档 - 账户管理器概述
账户管理器概述 这个类提供了访问到 用户在线账户的集中式注册中心 的能力.用户为每账户输入一次 认证信息(credentials,包含用户名和密码),过过 点击一次(one-click)完成认证的方式 ...
- 解決BufferedReader读取UTF-8文件中文乱码(转)
读取txt文件乱码 BufferedReader read = new BufferedReader(new FileReader(new File(filename))); 解决办法: InputS ...
- Spring Cloud Sleuth Zipkin - (1)
最近在学习spring cloud构建微服务,很多大牛都提供很多入门的例子帮助我们学习,对于我们这种英语不好的码农来说,效率着实提高不少.这两天学习到追踪微服务rest服务调用链路的问题,接触到zip ...
- eclipse format xml
eclipse版本信息:Version: Luna Release (4.4.0) eclipse默认使用Tab缩进,显得不是那么专业. 因为不同的系统对Tab的支持是不一样的,所以在不同的系统或者编 ...
- Docker run 命令的使用方法
[编者的话]在Docker中,run应该是用户使用最多的命令了,很多读者反馈不是很明白run命令的用法,而且相关的书籍.中文资料中对run命令的描述也不是非常完整,所以DockerOne组织翻译了Do ...
- JAVA :Jpanel 控件 无法显示问题
http://blog.csdn.net/gcangle/article/details/8222005 ——————————————————————————————————————————————— ...