vue-cli 3.0版本,配置代理Proxy,不同环境不同target(生产环境,uat环境和本地环境的配置)

vue-cli 3.0版本,配置代理Proxy,不同环境不同target(生产环境,uat环境和本地环境的配置),第1张

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/589137.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-12
下一篇 2022-04-12

发表评论

登录后才能评论

评论列表(0条)

保存