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 ...
随机推荐
- GitHub 创建工程
创建本地代码仓库 打开Git Bash 首先配置自己的身份,这样在提交代码的时候就能知道是谁提交的 输入git config --global user.name 名字 git config --gl ...
- 启动数据库报:ORA-03113
1启动数据库报:ORA-03113 2.查看oracle运行日志 tail -50 //home/app/oracle/diag/rdbms/orcl/orcl/trace/alert_orcl.l ...
- Python Socket(未编辑)
客户端 import socket 导入socket模块 client = socket.socket() 声明socket协议类型,同时生成socket连接对象 client.connect(('l ...
- mysql查询表的创建时间
mysql查询表的创建时间 查询语句: SELECT table_name,create_time FROM information_schema.TABLES;
- linux 应用层常用API/命令
一 API 1. bsearch NAME bsearch - binary search of a sorted array SYNOPSIS #include <stdlib.h> v ...
- Bazel: Ubuntu安装bazel-version-installer-os.sh失败的解决方法。
使用 bash ./bazel-version-installer-os.sh from: http://www.cnblogs.com/Need4Speak/p/5438240.html
- Delphi UTF编码 UTF8Encode、UTF8Decode、URLEncode、URLDecode
一.URL简介 URL是网页的地址,比如 http://www.cnblogs.com.Web 浏览器通过 URL 从 web 服务器请求页面. 由于URL字符串常常会包含非ASCII字符 ...
- 【纪中集训】2019.08.10【省选组】模拟TJ
前言 一套码农题-- T1 Description 给定一棵\(n(\in[2,10^5])\)个点的树,\(m(≤10^5)\)次询问,每次询问有两个不相同的点,要让所有点走到这两个点之一(走一条边 ...
- UNP学习第七章
一.套接口选项 函数getsockopt和setsockopt 函数fcntl 函数ioctl 二.getsockopt和setsockopt函数 #include <sys/socket.h& ...
- OC学习篇之---总结和学习目录
今天终于把OC的基础知识学习完了,但是这些知识只是最基础的,还有很多高级知识,这个可能需要后面慢慢的去学习才能体会到.下面就是这次学习OC的目录教程,如果大家发现有什么不正确的地方,请指正,小弟是新生 ...