process.env.NODE_ENV与@vue/cli-service及其.env.*默认外部环境配置文件之跨域部署
process.env.NODE_ENV与@vue/cli-service及其.env.*默认外部环境配置文件之跨域部署
目录
process.env.NODE_ENV与@vue/cli-service及其.env.*默认外部环境配置文件之间的关系
一、前言
二、详述
2.1、.env.*外部环境文件的用途
2.2、.env.*外部环境文件的配置
2.3、 package.json包管理文件的script脚本在做什么
2.4、vue-cli-service.js及Service.js中引用的进程环境process.env
喜欢的，就收藏并点个赞，鼓励我继续技术的原创写作及经验分享：
一、前言
vue-cli + webpack项目，内置了process.env.NODE_ENV环境指针数组（对象），用以识别其内置的webpack打包“模式”mode。
@vue/cli-service的脚本代码，在package.json的"scripts"指令对象，可对该打包“模式”mode进行配置，使得运行时，与打包“模式”mode相匹配。
与上述相对应的是，支持与此规则相对应的外部文件命名规则.env.*，分别为：
.env.development，代表“开发环境”（vue的默认值）
.env.production，代表“生产环境”（webpack默认的，vue该写了默认值为“开发环境”）
.env.inspect，代表“开发环境”
.env.其它自定义，代表debug“调试模式”
.env，全局，一旦配置了它，即覆盖所有，默认为“production生产环境”
二、详述
2.1、.env.*外部环境文件的用途
如果运行环境，前端站点的web服务、后端服务，它们之间，sameOrigin同域（即不存在“跨域”情况），这个.env.*外部环境文件就显得作用不大，前端站点与后端服务之间。可以通过“vue-router”路由插件及axios等http库，即可完成。
但是，前端站点与后端服务之间，一旦存在“跨域”情形，.env.*外部环境文件就显得非常“灵活”和“有用”。
比如生产环境：
后端：http://114.117.4.21:7001或http://114.117.3.24:8080或https://114.117.4.21:8080
前端：http://114.117.4.21:8080
再比如开发环境：
后端：http://192.168.3.100
前端：http://192.168.3.242
有了.env.*外部环境文件，能在“打包环节”和“运行时”，让分析器或浏览器等执行环境，识别前端“模式mode”对应的后端API：
2.2、.env.*外部环境文件的配置
默认将它们存取于“项目”根路径：
图1
# .env.production的配置：
# just a flag
ENV = 'production'# base api
# VUE_APP_BASE_API = '/prod-api'
VUE_APP_BASE_API = 'http://114.117.4.21:7001/api'
# .env.development的配置：
# just a flag
ENV = 'development'# base api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://192.168.3.100/api'
# .env.production的配置：
# just a flag
ENV = 'production'
# base api
# VUE_APP_BASE_API = '/prod-api'
VUE_APP_BASE_API = 'http://114.117.4.21:7001/api'
# .env.development的配置：
# just a flag
ENV = 'development'
# base api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://192.168.3.100/api'# .env的配置：
# 主要注意的是，它的作用就是用来做“全局”替换，默认mode为production生产模式：
ENV = 'production'
# 默认覆盖其它的“外部配置文件”的数值：
VUE_APP_BASE_API = 'http://114.117.4.21:7001/api'
# 如果不需要，则不要配置产生文件
2.3、 package.json包管理文件的script脚本在做什么
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build --mode production",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
"lint": "eslint --ext .js,.vue src",
"test:unit": "jest --clearCache && vue-cli-service test:unit",
"test:ci": "npm run lint && npm run test:unit"
},
以MsWindows举例说明如下，在你的项目根路径下，一旦npm install了 package.json中配置的相关库或模块，在项目根下降产生node_modules文件夹，其中：.\bin存放下载安装的各个“库或模块”的包的“解压缩”文件夹及node.js默认的二进制可执行子进程目录，各包目录就是其对应“库或模块”的js代码。
运行：npm run dev
就是通过npm包管理器，调用你安装的node.exe主进程；它在后台去调用vue的子进程代码bin/vue-cli-service.js，路径为：@vue/cli-service；执行参数为serve，路径为：lib/Service.js
这就是 "dev": "vue-cli-service serve"的内涵。
# main.js
#
console.log(
`这个process.env.VUE_CLI_MODE是@vue/cli-service内部的打印不出来,
其位置在node_modules/@vue/cli-service/lib/Service.js中,
初始化方法Service.init (mode = process.env.VUE_CLI_MODE)进行设置的;
node_modules/@vue/cli-service/package.json包管理文件设定了vue-cli-service源代码文件的具体指向:
node_modules/@vue/cli-service/bin/vue-cli-service.js"vue-cli-service": "bin/vue-cli-service.js
在vue-cli-service.js中,process.argv.slice(2)指定了node主进程的该子进程的所带的参数3个:
分别为:build、serve、inspect,它们涵盖的代码作用域分别代表了打包和执行的3种具体"mode"模式,其可选参数分别为:
// build
'modern',
'report',
'report-json',
'inline-vue',
'watch',
// serve
'open',
'copy',
'https',
// inspect
'verbose'
比如vue-cli-service build --modern
同时,vue内部,默认了其内置webpack的打包时的外部环境文件.env.***,用以在打包后让不同运行时环境,
来识别vue的app的后端服务api的指向: "domainOrIp:port/PathOfAPI"的全路径(注意尾部不要带"/"):VUE_APP_BASE_API :
比如: .env.development中,配置开发时的VUE_APP_BASE_API = 'http://192.168.3.100/api' ,环境为ENV = 'development' ,
而在生产环境.env.production,配置生产运行时的VUE_APP_BASE_API = 'http://114.117.4.21:7001/api' ,环境为ENV = 'production' ,
`);
2.4、vue-cli-service.js及Service.js中引用的进程环境process.env
node_modules/@vue/cli-service/bin/vue-cli-service.js
node_modules/@vue/cli-service/lib/Service.js
process.env，返回一个环境对象（指针数组），如“图1”：
# 浏览器中,全局属性process.env :
{
"NODE_ENV": "production",
"VUE_APP_BASE_API": "http://114.117.4.21:7001/api",
"BASE_URL": "/admin/"
}
未来，node进程process模块只导出string、number、boolean类型，不再导出类似env的对象，否则会抛异常。
除非在创建Worker实例时明确指定，否则每个Worker线程都有自己的进程副本。env，基于其父线程的进程。env或任何指定为Worker构造函数的env选项的内容。改变进程，env在Worker线程中不可见，只有主线程可以进行对操作系统或本机加载项的更改可见。
喜欢的，就收藏并点个赞，鼓励我继续技术的原创写作及经验分享：
Linux部署node.JS、NginX、egg、MongoDB和非js世界的后端服务之CentOS-腾讯云_pulledup的博客-CSDN博客
MSWindows安装部署mongoDB_pulledup的博客-CSDN博客
vue和webpack所依赖的node.js进程信息process及环境变量process.env_pulledup的博客-CSDN博客
影响WebPack部署的常见因素及解决办法_pulledup的博客-CSDN博客_webpack部署
vscode用户配置文件等的存取_pulledup的博客-CSDN博客_vscode配置文件在哪