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 = require(‘./prod.env‘) module.exports = merge(prodEnv, {
NODE_ENV: ‘"development"‘,
})
然后我们配置一个BASE_API,在页面上加一行代码,如下
‘use strict‘
const merge = require(‘webpack-merge‘)
const prodEnv = require(‘./prod.env‘) module.exports = merge(prodEnv, {
NODE_ENV: ‘"development"‘,
BASE_API: ‘"https://www.baidu.com"‘,
})
然后,我们编辑prod.env.js文件,生产环境,原本代码如下
‘use strict‘
module.exports = {
NODE_ENV: ‘"production"‘,
}
在此文件基础上,加一行代码,更改后如下
‘use strict‘
module.exports = {
NODE_ENV: ‘"production"‘,
BASE_API: ‘"https://www.baidu.com"‘,
}
最后,
// 配置API接口地址
var root = process.env.BASE_API
这个时候root就是公用的base变量了,可以直接访问接口的时候这样写:root+"api/home" 而且这个变量会根据环境 自动发生调整,打包的时候 会自动改成线上地址。
也可以在main.js里对这个变量进行全局配置。
Vue.prototype.$URL = process.env.BASE_API;
vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。的更多相关文章
- 解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
问题截图: 解决方案: 1.打开File --> Setting 窗口 2.搜索 Webpack 3.选择如下路径 问题解决
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
转载地址: https://blog.csdn.net/gebitan505/article/details/58166055 VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址 前 ...
- VUE 利用webpack 给生产环境和发布环境配置不同的接口地址
第一步,分别设置不同的接口地址 首先,我们分别找到下面的文件: /config/dev.env.js /config/prod.env.js 其实,这两个文件就是针对生产环境和发布环境设置不同参数的文 ...
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development、production)
使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- vue config.js配置生产环境和发布环境不同的接口地址问题
第一步,分别设置不同的接口地址 首先,我们分别找到下面的文件: /config/dev.env.js /config/prod.env.js 其实,这两个文件就是针对生产环境和发布环境设置不同参数的文 ...
- webpack 实现自动刷新,复制文件,实现开发环境和发布环境
webpack例子:https://github.com/Aquarius1993/webpackDemo 安装: webpack , webpack-dev-server 1.如何在使用webpac ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
随机推荐
- cmd 文件/文件夹的一切操作
dir // 列出目录下所有文件夹 rd dirname // 删除dirname文件夹(空文件夹) rd /s/q dirname // 删除dirname文件夹(非空)
- Centos安装docker+vulhub搭建
嫌弃平常因为复现搭建环境所带来的麻烦,所以打算用docker来管理搭建靶机 准备一个纯净的Centos系统虚拟机安装,这里已经安装好了就不演示怎么在虚拟机安装 安装Docker最基本的要求是Linux ...
- 大数据Hbase相关运维题
1.启动先电大数据平台的 Hbase 数据库,其中要求使用 master 节点的RegionServer.在 Linux Shell 中启动 Hbase shell,查看 HBase 的版本信息.(相 ...
- pytorch Model Linear实现线性回归CUDA版本
实验代码 import torch import torch.nn as nn #y = wx + b class MyModel(nn.Module): def __init__(self): su ...
- springmvc配置数据源方式
1 阿里巴巴的druid数据源 <!-- 配置数据源 使用的是Druid数据源 -->-<bean destroy-method="close" init-met ...
- Websec level 30
前言 昨天在易霖博搞的网络安全与执法竞赛看到的一道web题,实际上就是用两个原题凑起来的.. 不过后面的一关没见过这里简单记录一下 第一关 打开是个登录界面,和BJDCTF的简单注入一模一样,连密码都 ...
- curl发送多维数组
//通过curl模拟post的请求: function SendDataByCurl($url,$data=array()){ //对空格进行转义 $url = str_replace(' ','+' ...
- Web中间件常见漏洞
IIS Internet Information Services--windows 解析漏洞 IIS 6.x 基于文件名:该版本默认会将 *.asp;.jpg 此种格式的文件名,当成 Asp 解析, ...
- 递归复制&查看文件夹下的指定后缀的文件
<?php header("content-type:text/html;charset=utf8"); set_time_limit(0); $dir = "d: ...
- java中Runnable和Callable的区别
文章目录 运行机制 返回值的不同 Exception处理 java中Runnable和Callable的区别 在java的多线程开发中Runnable一直以来都是多线程的核心,而Callable是ja ...