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

最新推荐文章于 2024-01-15 20:05:36 发布

原创最新推荐文章于 2024-01-15 20:05:36 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #配置文件 #动态加载

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在Vue项目中动态加载不同环境配置的方法，通过在根目录下设置多个.env文件，如.env.development和.env.production，实现了开发、测试、生产等环境间的无缝切换。无需更改代码，仅需修改npm命令参数即可。

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

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

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

.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
})

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