vue-cli 3.0版本,配置代理Proxy,不同环境不同target(生产环境,uat环境和本地环境的配置)
1、在项目的的根目录下新建vue.config.js
2、新建一个config包,里面存放不同的环境文件,里面包含:pro.env.js(生产环境配置),uat.env.js(测试环境配置),dev.env.js(本地环境)
文件目录如下:
2-1、生产环境内容
// 生产环境
module.exports = {
NODE_ENV: '"production"',
hosturl:''
}
2-2、测试环境内容
// 测试环境
module.exports = {
NODE_ENV: '"test"',
hosturl:''
}
2-3、本地环境内容
const hosturl= '';
// 本地环境
module.exports = {
NODE_ENV: '"development"',
hosturl:hosturl
}
3,vue.config.js 内容配置
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path'); const devProxy = ['/pc','/weixin','android',...]; // 代理
var proEnv = require('./config/pro.env'); // 生产环境
var uatEnv = require('./config/uat.env'); // 测试环境
var devEnv = require('./config/dev.env'); // 本地环境
const env = process.env.NODE_ENV;
let target = '';
// 默认是本地环境
if(env==='production'){ // 生产环境
target = proEnv.hosturl;
}else if(env==='test'){ // 测试环境
target = uatEnv.hosturl;
}else{ // 本地环境
target = devEnv.hosturl;
}
// 生成代理配置对象
let proxyObj = {};
devProxy.forEach((value, index) => {
proxyObj[value] = {
target: target,
changeOrigin: true,
pathRewrite: {
[`^${value}`]: value
}
};
}); module.exports = {
baseUrl: '/',
outputDir: 'dist',
devServer: {
// open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
disableHostCheck: true,
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
proxy: proxyObj, // string | Object
before: app => {}
}
};
4、反向代理
有时我们需要进行配置反向代理,一定要加上“disableHostCheck: true”这句话
5、命令配置,在package.json文件里配置
"scripts": {
"dev": "vue-cli-service serve --open",
"prod":"vue-cli-service build --mode=production",
"uat": "vue-cli-service build --mode=test"
},
5-1 serve 和build 的区别
serve 是服务命令,build是用于打包用的,比如 npm run dev ,可以在浏览器上直接浏览页面,prod和uat 这两个就只能在本地打好包,然后放到服务器上,访问网址才能看到。
如何要在浏览器上看到不同的环境就用如下命令
"scripts": {
"dev": "vue-cli-service serve --open",
"prod":"vue-cli-service serve --mode=production",
"uat": "vue-cli-service serve --mode=test"
},
大家可以根据自己的需求来配置。
这时,代理,不同环境走不同的target就配置好了,下面在多说些注意事项
6,cli-service 服务命令,默认情况下必须有一个development
--open open browser on server start
--mode specify env mode (default: development)
--host specify host (default: 0.0.0.0)
--port specify port (default: 8080)
--https use https (default: false)
7、
NODE_ENV - 环境的运行模式有"development", "production" "test"
hosturl- target(如:https:www.baidu.com).
8.官方解释
8-1,环境变量和模式
您可以通过将以下文件放在项目根目录中来指定env变量:
.env #在所有情况下加载
.env.local #在所有情况下加载,通过GIT中忽略
.env.[model] #仅装入指定的模式
.env.[model].local #仅装入指定的模式,通过GIT中忽略
env文件只包含环境变量的键=值对:
FOO=bar
VUE_APP_SECRET=secret
加载的变量将可用于所有vue-cli-service命令,插件和依赖项。
模式
模式是Vue CLI项目中的一个重要概念。默认情况下,Vue CLI项目中有三种模式:
development 用于 vue-cli-service serve
production被vue-cli-service build和使用vue-cli-service test:e2e
test 用于 vue-cli-service test:unit
请注意,模式不同NODE_ENV,因为模式可以包含多个环境变量。也就是说,NODE_ENV默认情况下每个模式都设置为相同的值 - 例如,NODE_ENV将设置为"development"开发模式。
您可以通过后缀.env文件来设置仅适用于特定模式的环境变量。例如,如果创建.env.development在项目根目录中命名的文件,则在该文件中声明的变量将仅在开发模式下加载。
您可以通过传递--mode选项标志来覆盖用于命令的默认模式。例如,如果要在build命令中使用开发变量,请将其添加到package.json脚本中:
"dev-build": "vue-cli-service build --mode development",
示例:分段模式
假设我们有一个包含以下.env文件的应用:
VUE_APP_TITLE=My App
以下.env.staging文件:
NODE_ENV=production
VUE_APP_TITLE=My App (staging)
vue-cli-service build建立一个生产应用程序,装载.env,.env.production以及.env.production.local如果它们存在;
vue-cli-service build --mode staging建立在分段模式中,使用生产应用.env,.env.staging以及.env.staging.local如果它们存在。
在这两种情况下,应用程序都是作为生产应用程序构建的,因为NODE_ENV它在暂存版本中process.env.VUE_APP_TITLE会被不同的值覆盖。
9. 参考文献
https://github.com/vuejs/vue-cli/blob/dev/docs/guide/mode-and-env.md
vue-cli 3.0版本,配置代理Proxy,不同环境不同target(生产环境,uat环境和本地环境的配置)的更多相关文章
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
- vue/cli 3.0脚手架搭建
在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli 安装成功: 安装完成 ...
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
- VUE CLI 3.0 安装及创建项目
一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/ 详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...
- vue/cli 3.0 脚手架【进阶】 使用 amfe-flexible 和 postcss-px2rem进行移动端适
安装vue-cli3 npm install -g @vue/cli 创建项目 vue-cli-test 脚手架-项目-成功-运行项目 基于vue-cli配置移动端自适应 转自:http://hj ...
- 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因
1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...
- vue cli 4.0.5 的使用
vue cli 4.0.5 的使用 现在的 vue 脚手架已经升级到4.0的版本了,前两日vue 刚发布了3.0版本,我看了一下cli 4 和cli 3 没什么区别,既然这样,就只总结一下vue cl ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- Django + Vue cli 3.0 访问静态资源问题
[问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...
随机推荐
- 几种RAID级别的比较
等级 概要 冗余 盘数 读快 写快 RAID 0 便宜.快速.危险 No N Yes Yes RAID 1 高速度.简单.安全 Yes 2(通常) Yes No RAID 5 安全(速度)成本折中 Y ...
- ubuntu下oracle 数据库安装
环境:腾讯云 一. 由于腾讯云直接下载oracle太慢,先安装docker 1.sudo apt update 2.接下来,使用apt安装一些允许通过HTTPS才能使用的软件包: sudo apt i ...
- Future模式的简单实现
/** * 数据接口 */ public interface Data { public String getResult(); } /** * 最终需要使用的数据模型 */ public class ...
- 15.stop引发的数据不一致
/** * 数据不一致问题 * stop */ public class StopDemo { public static Student student = new Student(); publi ...
- C++ 使用老牌库xzip & unzip对文件进行压缩解压
原文链接 https://www.codeproject.com/Articles/7530/Zip-Utils-clean-elegant-simple-C-Win https://www.code ...
- InnoDB的LRU淘汰策略
Reference: https://time.geekbang.org/column/article/121710 InnoDB存储引擎是基于集合索引实现的数据存储,也就是除了索引列以及主键是存储在 ...
- Tomcat访问任意磁盘的图片资源
项目中用户上传的大量图片存放在项目底下带来诸多不便.每次部署项目都需要拷贝出来,防止覆盖掉以前的 图片.容易丢失,前功尽弃.甚至造成经济损失.不可估量. 如何配置tomcat访问图片路径呢?首页你代码 ...
- java 读取html字符串替换字符
import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.jsoup.nodes.Element; import org. ...
- 【Flutter学习】事件处理与通知之事件处理
一,概述 移动应用中一个必不可少的环节就是与用户的交互,在Flutter中提供的手势检测为GestureDetector. Flutter中的手势系统分为二层: 第一层是触摸原事件(指针) Point ...
- 【软工项目Beta阶段】第10周Scrum会议博客
第十周会议记录 小组GitHub项目地址https://github.com/ouc-softwareclass/OUC-Market 小组Issue地址https://github.com/ouc- ...