基于Vue-Cli打包自动生成/抽离相关配置文件的实现方法

背景•基于Vue-cli项目产品部署，涉及到的交互的地址等配置信息，每次都要重新打包才能生效，极大的降低了效率。我们的目的是让项目实施的小伙伴重新快乐起来。网上实现的方式，都是半自动化的，还需要重新修改。需求点•配置化：打包后的配置文件可二次修改•配置自动生成：vue-cli提供了各种环境的打包，要实现相关配置文件的自动打包•研发人员无痛感：对于产品研发人员来说，不需要增加额外的打包成本，基于Vue-cli的开发习惯不变。实现步骤一：配置自动生成•安装generate-asset-webpack-plugin插件。用于配置文件自动生成。 npm install --sav在现代前端开发中，Vue CLI是一个非常流行的脚手架工具，它可以帮助开发者快速搭建Vue.js项目。然而，在实际的项目部署过程中，经常会遇到一些需要动态配置的问题，比如服务器接口地址、环境变量等。本篇文章将详细介绍如何利用Vue CLI自动打包并生成配置文件，以提高开发效率和灵活性。我们要解决的是配置文件的自动化生成。在描述中提到，项目实施时经常需要更改交互的地址等配置信息，这导致频繁打包，效率低下。为了改善这种情况，我们可以采用`generate-asset-webpack-plugin`插件来自动处理配置文件。 1. **安装插件**：通过npm安装`generate-asset-webpack-plugin`，该插件会帮助我们在打包过程中自动生成配置文件。 ```bash npm install --save-dev generate-asset-webpack-plugin ``` 2. **配置webpack**：接下来，我们需要在`webpack.prod.conf.js`文件中引入并配置这个插件。这里假设我们已经有了一个根据环境（如`dev`, `test`, `prod`）加载的配置文件系统，例如`env_config`变量会指向对应的环境配置文件。在webpack配置中，我们添加以下代码： ```javascript const GenerateAssetPlugin = require('generate-asset-webpack-plugin'); const env = require('../config/' + process.env_config + '.env'); //在plugins数组中添加以下代码new GenerateAssetPlugin({ filename: utils.assetsPath('../static/serverConfig.json'), fn: (compilation, cb) => { const parseEnv = Object.assign({ _hash: compilation.hash }, env); Object.keys(parseEnv).forEach(key => { parseEnv[key] = parseEnv[key].replace(/"/g, ""); }); cb(null, JSON.stringify(parseEnv, null, 2)); }, extraFiles: [], }) ```这段代码会根据当前的环境变量`env_config`加载相应的环境配置，并将配置内容转换为JSON字符串，然后保存到`serverConfig.json`文件中。 3. **打包命令**：调整打包命令，例如使用`npm run build:prod`来执行生产环境的打包，Vue CLI将会自动处理配置文件并将其打包到静态资源目录。 4. **配置文件的全局访问**：为了让开发人员在本地开发时能够方便地读取配置，可以创建一个名为`serverConfig.json`的文件，内容与生产环境配置相同，但去掉引号以便本地开发使用。然后，在`main.js`文件中，我们需要添加代码来读取这个配置文件，并将其挂载到Vue实例上，以便全局访问： ```javascript import axios from 'axios'; //读取配置文件内容async function getServerConfig() { return new Promise((resolve, reject) => { axios.get('./static/serverConfig.json') .then(result => { const config = result.data; for (const key in config) { Vue.prototype[key] = config[key]; } resolve(); }) .catch(reject); } //请求文件内容及创建实例async function main() { await getServerConfig(); console.log('我的地址是' + Vue.prototype.BASE_API); axios.defaults.baseURL = Vue.prototype.BASE_API; //设置axios的基础地址new Vue({ router, store, render: h => h(App) }).$mount('#app'); } main(); ```通过以上步骤，我们实现了基于Vue CLI的配置文件自动化打包和全局访问。研发人员在开发阶段可以直接使用本地的配置文件，而在部署时，Vue CLI会根据指定的环境变量生成相应的配置文件，大大提高了开发效率，同时也保证了研发人员的工作流程不会受到影响。