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环境和本地环境的配置)的更多相关文章

  1. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  2. vue/cli 3.0脚手架搭建

    在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli  安装成功:  安装完成 ...

  3. 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

    译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...

  4. VUE CLI 3.0 安装及创建项目

    一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/   详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...

  5. vue/cli 3.0 脚手架【进阶】 使用 amfe-flexible 和 postcss-px2rem进行移动端适

    安装vue-cli3   npm install -g @vue/cli 创建项目 vue-cli-test 脚手架-项目-成功-运行项目 基于vue-cli配置移动端自适应 转自:http://hj ...

  6. 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因

    1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...

  7. vue cli 4.0.5 的使用

    vue cli 4.0.5 的使用 现在的 vue 脚手架已经升级到4.0的版本了,前两日vue 刚发布了3.0版本,我看了一下cli 4 和cli 3 没什么区别,既然这样,就只总结一下vue cl ...

  8. @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

    目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...

  9. Django + Vue cli 3.0 访问静态资源问题

    [问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...

随机推荐

  1. GitHub 创建工程

    创建本地代码仓库 打开Git Bash 首先配置自己的身份,这样在提交代码的时候就能知道是谁提交的 输入git config --global user.name 名字 git config --gl ...

  2. 启动数据库报:ORA-03113

    1启动数据库报:ORA-03113 2.查看oracle运行日志 tail  -50 //home/app/oracle/diag/rdbms/orcl/orcl/trace/alert_orcl.l ...

  3. Python Socket(未编辑)

    客户端 import socket 导入socket模块 client = socket.socket() 声明socket协议类型,同时生成socket连接对象 client.connect(('l ...

  4. mysql查询表的创建时间

    mysql查询表的创建时间 查询语句: SELECT table_name,create_time FROM information_schema.TABLES;

  5. linux 应用层常用API/命令

    一 API 1. bsearch NAME bsearch - binary search of a sorted array SYNOPSIS #include <stdlib.h> v ...

  6. Bazel: Ubuntu安装bazel-version-installer-os.sh失败的解决方法。

    使用 bash ./bazel-version-installer-os.sh from: http://www.cnblogs.com/Need4Speak/p/5438240.html

  7. Delphi UTF编码 UTF8Encode、UTF8Decode、URLEncode、URLDecode

    一.URL简介    URL是网页的地址,比如 http://www.cnblogs.com.Web 浏览器通过 URL 从 web 服务器请求页面.    由于URL字符串常常会包含非ASCII字符 ...

  8. 【纪中集训】2019.08.10【省选组】模拟TJ

    前言 一套码农题-- T1 Description 给定一棵\(n(\in[2,10^5])\)个点的树,\(m(≤10^5)\)次询问,每次询问有两个不相同的点,要让所有点走到这两个点之一(走一条边 ...

  9. UNP学习第七章

    一.套接口选项 函数getsockopt和setsockopt 函数fcntl 函数ioctl 二.getsockopt和setsockopt函数 #include <sys/socket.h& ...

  10. OC学习篇之---总结和学习目录

    今天终于把OC的基础知识学习完了,但是这些知识只是最基础的,还有很多高级知识,这个可能需要后面慢慢的去学习才能体会到.下面就是这次学习OC的目录教程,如果大家发现有什么不正确的地方,请指正,小弟是新生 ...