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配置文件在哪