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 ...
随机推荐
- Python3.5-20190508-廖老师-自我笔记-迭代器
可以实现for ...in 的都可以称为,可迭代对象,Iterable 可以使用isinstance(是什么实例嘛)来判断是不是可迭代对象 可以被next()函数调用并不断返回下一个值的对象称为迭代器 ...
- oracle trim无效?
这里说说如果是全角空格怎么去除 方法一 trim(TO_SINGLE_BYTE('aaa')) 方法二 SELECT TRIM(replace('aaa',' ','')) FROM dual
- 工程师技术(六):Linux工程师 综合测试
一.Linux工程师 综合测试 目标: 根据本文提供的练习步骤完成所有练习案例. 方案: 开始练习之前,先依次重置虚拟机环境. [root@room9pc13 ~]# rht-vmctl reset ...
- paper 146:CAFFE--leveldb/lmdb文件
在深度学习的实际应用中,经常用到的原始数据是图片文件,如jpg,jpeg,png,tif等格式的,而且有可能图片的大小还不一致.而在caffe中经常使用的数据类型是lmdb或leveldb,因此就产生 ...
- Delphi 正则表达式之TPerlRegEx
官方网站: http://www.regular-expressions.info/delphi.html 直接下载: http://www.regular-expressions.info/down ...
- HTML—学习笔记
1 .表格 <br/>换行 <p> align top<img src="./julizi.png" align="top" &g ...
- MySQL concat、concat_ws 和 group_concat 的用法
一.CONCAT()函数CONCAT()函数用于将多个字符串连接成一个字符串.使用数据表Info作为示例,其中SELECT id,name FROM info LIMIT 1;的返回结果为+----+ ...
- Java学习之单例模式
单例设计模式:解决一个类在内存中只存在一个对象思想:1.为了避免过多创建类的对象,禁止此类以外创建对象(构造方法私有化)2.为了类可以被使用就必须创建此类对象,只好在本类中,创建对象3.在此类中创建的 ...
- The request with exception: The SSL connection could not be established, see inner exception. requestId 解决方案
DOTNET CORE 部署 Centos7 抛出异常 环境变量如下: .NET Core SDK (reflecting any global.json): Version: 2.2.401 Com ...
- python学习笔记:模块——自定义模块的3种导入方式
一.定义 模块就是用一堆的代码实现了一些功能的代码的集合,通常一个或者多个函数写在一个.py文件里,而如果有些功能实现起来很复杂,那么就需要创建n个.py文件,这n个.py文件的集合就是模块.如果不懂 ...