简介
当我们开发 Vue 项目时，经常需要根据环境（如测试环境、开发环境、生产环境）来配置一些参数，这时就可以使用 vue-config-manager 这个 npm 包来管理配置。vue-config-manager 可以方便地帮助我们管理配置文件，从而使得我们可以通过简单的命令来切换不同的环境。
安装
在开始使用 vue-config-manager 之前，需要先进行安装：
npm install vue-config-manager --save-dev # 或者 yarn add vue-config-manager --dev
使用方法
配置文件
vue-config-manager 需要我们在项目中添加一个配置文件。这个配置文件应该根据不同环境而有所不同。例如：
dev.config.js：
module.exports = {
baseUrl: 'http://localhost:8080'
};test.config.js：
module.exports = {
baseUrl: 'http://test.example.com'
};prod.config.js：
module.exports = {
baseUrl: 'https://example.com'
};Vue 配置
在 Vue 项目的根目录下添加 vue.config.js（如果该文件不存在，需要手动创建）。在该文件中，可以使用 vue-config-manager 来读取不同的配置文件。例如：
-- -------------------- ---- -------
----- ------ - ------------------------------
-------------- - -
-----
---------- -
------ -
------- -
------- ---------------
------------- ----
-
-
-
-----
--在上述代码中，baseUrl 是从配置文件中读取的。
切换环境
在 package.json 中添加以下脚本：
"scripts": {
"serve:dev": "vue-cli-service serve --mode development --config-path vue.config.dev.js",
"serve:test": "vue-cli-service serve --mode test --config-path vue.config.test.js",
"serve:prod": "vue-cli-service serve --mode production --config-path vue.config.prod.js"
}然后就可以使用一下命令来运行项目了：
npm run serve:dev npm run serve:test npm run serve:prod
示例代码
一个完整的示例代码如下，其中包括一个 node 服务和一个 Vue 组件。
node 服务
server.js：
const express = require('express');
const app = express();
app.use('/api', (req, res) => {
res.send(`URL: ${req.originalUrl}, BaseUrl: ${req.baseUrl}`);
});
app.listen(3000, () => console.log('The server has started.'));vue 组件
HelloWorld.vue：
-- -------------------- ---- -------
----------
-----
------ ----- -------
----- ------- ------
------
-----------
--------
----- ------ - ------------------------------
------ ------- -
----- -------------
------ -
------ -
------ ------- -------
--
--
--------- -
--------- -
------ ---------------
-
-
--
---------总结
vue-config-manager 可以方便地帮助我们管理配置文件，从而使得我们可以通过简单的命令来切换不同的环境。使用 vue-config-manager 可以提高我们开发的效率，同时也可以方便地管理配置文件，使得我们的项目更加规范化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005556c81e8991b448d29c6