node+vue之动态加载配置文件

缺乏、安全感 2023-06-27 12:38 37阅读 0赞

对于后端起家的我来说，前段不能动态加载配置文件，非常介意。于是将前段架修改了一下。

根目录下添加不同环境下的：.env配置文件。目录结构如下；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhcHRhaW5KYXZh_size_16_color_FFFFFF_t_70][]

分别添加不同环境下对应的配置文件：

.env  
.env.development  
.env.outside  
.env.production  
.env.staging

文件内容：

.env: 默认配置文件，将所涉及到的变量都在这里配制一个默认值。（貌似必须的）

# just a flag
    NODE_ENV = 'development'
    
    VUE_APP_CONTEXT_PATH=/
    VUE_APP_CONTEXT_PORT=80
    
    VUE_APP_ERMS_API = 'http://192.168.0.222:20002/aa/api'
    VUE_APP_ORG_API = 'http://192.168.0.222:10004/bb/api'
    VUE_APP_ECM_API = 'http://192.168.0.222'
    VUE_APP_FILESDK_API = 'http://192.168.0.222:10003'
    
    VUE_CLI_BABEL_TRANSPILE_MODULES = true

开发环境配置文件,替换.env中配置变量对应开发环境的值，这里和.env一样，因为.env按照开发环境默认配置的：

.env.development

# just a flag
    NODE_ENV = 'development'
    
    VUE_APP_CONTEXT_PATH=/
    VUE_APP_CONTEXT_PORT=9527
    # base api
    
    VUE_APP_ERMS_API = 'http://192.168.0.222:20002/aa/api'
    VUE_APP_ORG_API = 'http://192.168.0.222:10004/bb/api'
    VUE_APP_ECM_API = 'http://192.168.0.222'
    VUE_APP_FILESDK_API = 'http://192.168.0.222:10003'
    
    VUE_CLI_BABEL_TRANSPILE_MODULES = true

生产环境的配置文件：

.env.production

# just a flag
    NODE_ENV = 'production'
    VUE_APP_CONTEXT_PORT=80
    
    VUE_APP_ERMS_API = 'http://www.myserver.cn:10004/aa/api'
    VUE_APP_ORG_API = 'http://www.myserver.cn:10004/bb/api'
    VUE_APP_ECM_API = 'http://www.myserver.cn:10011'
    VUE_APP_FILESDK_API = 'http://www.myserver.cn:10003'

package.json 中scripts脚本配置添加配置命令如下：

"scripts": {
        "dev": "vue-cli-service serve --mode development",
        "out": "vue-cli-service serve --mode outside",
        "prod": "vue-cli-service serve --mode production",
        "build": "vue-cli-service build",
        "build:prod": "vue-cli-service build --mode .env.production",
        "build:stage": "vue-cli-service build --mode staging",
        "preview": "node build/index.js --preview",
        "lint": "eslint --ext .js,.vue src",
        "lint:fix": "eslint --fix . --ext .js,.vue src",
        "test:unit": "jest --clearCache && vue-cli-service test:unit",
        "test:ci": "npm run lint && npm run test:unit",
        "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
      }

例如："dev": "vue-cli-service serve --mode development" 就是配置的我们的运行命令对应npm run dev是执行的语句，

\--mode development 是指定加载的.env.production配置文件的后边部分。（这样是标准写法，这里不能写全称，否则加载不到）

启动项目时执行命令：

1. 公司内网启动命令；npm run dev
        2. 生产环境启动命令：npm run prod

以上即可实现，配置文件动态加载配置项。

在vue的js文件中取配置文件的值可以参考如下方式：js文件中直接用process.env.VUE\_APP\_ERMS\_API获取即可

import axios from 'axios'
    
    // create an axios instance  创建一个axios实例
    const service = axios.create({
      baseURL: process.env.VUE_APP_ERMS_API, // url = base url + request url
      // withCredentials: true, // send cookies when cross-domain requests 当进行跨域亲求得时候发送cookie
      timeout: 10000// request timeout
    })

有了上述，动态加载方式，具体怎么应用就看自己得了。可以让我们切换环境不用改任何代码。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhcHRhaW5KYXZh_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200106175240193.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhcHRhaW5KYXZh,size_16,color_FFFFFF,t_70