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

背景

•基于Vue-cli 项目产品部署,涉及到的交互的地址等配置信息,每次都要重新打包才能生效,极大的降低了效率。我们的目的是让项目实施的小伙伴重新快乐起来。网上实现的方式,都是半自动化的,还需要重新修改。

需求点

•配置化:打包后的配置文件可二次修改
•配置自动生成:vue-cli 提供了各种环境的打包,要实现相关配置文件的自动打包
•研发人员无痛感:对于产品研发人员来说,不需要增加额外的打包成本,基于Vue-cli的开发习惯不变。

实现步骤

一:配置自动生成

•安装generate-asset-webpack-plugin插件。用于配置文件自动生成。

npm install --save-dev generate-asset-webpack-plugin

•配置webpack.prod.conf.js文件.新增如下代码

// 这段代码在配置文件开头
var GenerateAssetPlugin = require('generate-asset-webpack-plugin'); //Add:Strony;Date:2018年12月7日
const env = require('../config/' + process.env.env_config + '.env')
// 打包后配置文件:新增 2018年12月7日;Strony
var createServerConfig = function (compilation) {
 //Step1:先复制原对象
 var parseEnv = Object.assign({ _hash: compilation.hash}, env)
 //Step2:去除配置文件中的引号
 Object.keys(parseEnv).forEach(function (key) {
  parseEnv[key] = parseEnv[key].replace(/"/g, "");
 });
 return JSON.stringify(parseEnv, null, 2);
}
// 这段代码加在plugins:[]中
 new GenerateAssetPlugin({
   filename: utils.assetsPath('../static/serverConfig.json'),
   fn: (compilation, cb) => {
    cb(null, createServerConfig(compilation));
   },
   extraFiles: []
  })

•输入npm run build:prod 打包命令.vue-cli 默认提供了几个环境的打包环境:早期版本直接:npm run build

结果如下:

•生成的配置文件样式如下:

{
 "_hash": "52f44b45b5b600b7f36e",
 "NODE_ENV": "production",
 "ENV_CONFIG": "sit",
 "BASE_API": "http://*****/APIPlateForm/",
 "BASE_ADDR": "http://****/",
 "REPORT_ADDR": "******"
}

二:全局变量从配置文件读取

1.增加serverConfig.json。目的是开发人员本地开发时候,可以从配置文件读取。内容Copy本地的dev.env.js.住里面的格式为json,去除多余的引号。

2.在main.js中添加下面的代码。目的:读取配置地址挂载在全局对象

import axios from 'axios'
/* eslint-disable no-new */
// 请求文件内容
function getServerConfig() {
 return new Promise((resolve, reject) => {
  axios.get('./static/serverConfig.json').then(result => {
   console.log(result)
   const config = result.data;
   for (const key in config) {
    Vue.prototype[key] = config[key];
   }
   resolve();
  })
 })
}
// 请求文件内容及创建实例
async function main() {
 await getServerConfig();
 console.log('我的地址是' + Vue.prototype.BASE_API)
 axios.defaults.baseURL = Vue.prototype.BASE_API;//axios 的基础地址从配置文件读取
 new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
 })
}
// 方法初始执行
main();

3.项目执行:npm run dev。在浏览器的控制台下可以查看到相关的配置信息

4.使用方法:在vue文件中,直接访问使用各类地址信息。

  handleWatchLib(linurl) {
    window.open(this.BASE_ADDR + linurl);
    return false;
   }

总结

以上所述是小编给大家介绍的基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 使用 webpack 插件自动生成 vue 路由文件的方法

    一款自动生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin在项目中试点成功了,现在在项目中已经不需要再维护路由配置文件了,由插件自动生成,节省了大家维护路由的时间. 从长远来看,使用插件自动生成路由是具有一定好处的.当项目中的路由配置非常多的时候,为了区分业务,你可能需要分成许多个文件来存放这些路由文件,这样就不得不去维护这些路由文件. 比如这样的路由文件结构: |-src/ |-router/ index.js childrenRouter.js

  • 如何通过shell脚本自动生成vue文件详解

    前言 最近在写nuxt项目时候每次新建页面都要去新建然后引入各种需要的依赖很是麻烦,所以想写一个脚本自动生成文件 省去手动新建 现写下实现方法 给大家参考 Mac下可直接运行 Windows下需要安装Cygwin类软件且配置环境变量后运行 使用方法 1.需要修改package.json 的scrpts 加一条create 或者自定义名字 主要是为了我们在terminal中输入指令后运行对应的脚本 package.json 2.在项目根目录新建一个template文件夹放自己的模板文件 文件内容根

  • 通过npm或yarn自动生成vue组件的方法示例

    不知道大家每次新建组件的时候,是不是都要创建一个目录,然后新增一个.vue文件,然后写template.script.style这些东西,如果是公共组件,是不是还要新建一个index.js用来导出vue组件.虽然有vscode有代码片段能实现自动补全,但还是很麻烦,今天灵活运用scripts工作流,自动生成vue文件和目录. 实践步骤 安装一下chalk,这个插件能让我们的控制台输出语句有各种颜色区分 npm install chalk --save-dev yarn add chalk --s

  • vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component

    介绍 做前端的大家都知道通过 vue 开发的项目每次创建新组建的时候,都要新建一个目录,然后新增 .vue 文件,在这个文件中再写入 template . script . style 这些内容,虽然在写入的时候大家都有自己的自动补全共计,不过这些都是模板性的,每次都要这样重复操作,很麻烦有没有. 本文就是通过node来帮助我们,自动去执行这些重复操作,而我们只需要告诉控制台我们需要创建的组件名字就可以了. 本文自动创建的组件包含两个文件:入口文件 index.js .vue文件 main.vu

  • Vue结合原生js实现自定义组件自动生成示例

    就目前三大前端主流数据驱动框架(vue,ng,react)而言,均具有创建自定义组件的api,但都是必须先做到事先写好挂载点,这个挂载点可以是原有静态元素标签也可以是自定义模板:对于多种组件通过同一数据流生成的,如果事先在页面上写好挂载点(mounted),然后通过dom操作去动态添加,会遇到类似这样一条错误提示信息:Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.(-).这又是为何呢,下一

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

    背景 •基于Vue-cli 项目产品部署,涉及到的交互的地址等配置信息,每次都要重新打包才能生效,极大的降低了效率.我们的目的是让项目实施的小伙伴重新快乐起来.网上实现的方式,都是半自动化的,还需要重新修改. 需求点 •配置化:打包后的配置文件可二次修改 •配置自动生成:vue-cli 提供了各种环境的打包,要实现相关配置文件的自动打包 •研发人员无痛感:对于产品研发人员来说,不需要增加额外的打包成本,基于Vue-cli的开发习惯不变. 实现步骤 一:配置自动生成 •安装generate-ass

  • 基于vue cli重构多页面脚手架过程详解

    官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考.不好的地方也请大家指正. 准备 使用vue-cli生成一个你需要的单页面项目脚手架,然后我们就要开始我们的改装工程了. 重构过程 步骤一 改变目录结构 step1 在src目录下面新建views文件夹,然后再views文件夹下新建index文件夹 step2 将src目录下的main.js和App.

  • 基于vue cli 通过命令行传参实现多环境配置

    大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了 npm run serve //默认本地开发环境 npm run serve -sit //本地开发中使用sit环境 npm run serve -uat //本地开发中使用uat环境 npm run build //默认打包后使用生产环境 npm run build -local //打包后使用本地环境 npm

  • 基于JavaScript代码实现自动生成表格

    废话不多说,直接给大家贴js代码了,具体代码如下所示: //js实现输入表格行数.列数自动生成表格源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • android studio 打包自动生成版本号与日期,apk输入路径详解

    一. 打开项目选择如图示1 (build.gradle 项目位置) 二. 1. build.gradle 文件添加内容如下.gradle是[com.android.tools.build:gradle:3.0.0 以下版本] android{ defaultConfig {...} 自动追加版本号和版本名称 android.applicationVariants.all { variant->variant.outputs.each { output-> output.outputFile =

  • 详解基于Vue cli开发修改外部组件Vant默认样式

    前言 在引入外部组件的时候,想要修改默认样式,可以通过class修改,但一般会有权重不够等各种原因,官网其实列出了一套主题定制的方案,通过覆盖配置文件来修改样式,官网地址:主题定制 提示:以下是本篇文章正文内容,下面案例可供参考 一.Less 因为Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,可以通过替换样式变量即可定制你自己需要的主题. 给你的项目配置less: npm install less --save-dev npm install less-loader --s

  • 使用Mybatis Generator结合Ant脚本快速自动生成Model、Mapper等文件的方法

    MyBatis简介: MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以使用简单的XML或注解用于配置和原始映射,将接口和Java的POJO(Plain Old Java Objects,普通的Java对象)映射成数据库中的记录. 相关阅读:MyBatis入门学习教程(一)-MyBatis快速入门 使用过Mybatis的同学都知道,针对每一个项目中使用到的数据库表都需要建

  • laravel-admin自动生成模块,及相关基础配置方法

    一.模型创建.数据迁移.以及关联模型控制器 $ php artisan make:model Brand -m //创建模型并生成迁移文件 $ php artisan migrate //运行迁移 $ php artisan admin:make BrandController --model=App\Brand //创建关联Brand模型的控制器 二.问题:创建模型后,会生成一个临时文件(php artisan make:model Brand -m) 路径:database/migratio

  • IDEA自动生成TestNG的testng.xml的插件方法

    某地方见到的,自己实际操作一遍,记录一下.方便以后查询.下载Create TestNG XML 插件,重启IDEA即可. 重启idea,新建Maven项目. pom.xml增加依赖 <dependency> <groupId>org.testng</groupId> <artifactId>testng</artifactId> <version>6.10</version> </dependency> 产生t

  • 基于vue框架手写一个notify插件实现通知功能的方法

    简单编写一个vue插件,当点击时触发notify插件,dom中出现相应内容并且在相应时间之后清除,我们可以在根组件中设定通知内容和延迟消失时间. 1. 基础知识 我们首先初始化一个vue项目,删除不需要的组件和样式,主要针对src下一些初始化资源,有过vue项目基础的应该很容易理解,如果没有vue基础建议先熟悉每个初始化文件的作用. 关于vue中如何开发插件可以直接看vue官方文档,简单了解插件开发过程,vue插件文档. 现在我们在src目录下新建一个plugin文件夹,里面存放要开发的插件no

随机推荐