webpack + vue 打包生成公共配置文件（域名） 方便动态修改

需求原因

原来的项目中域名是打包到项目里面的，打包后不能动态配置，只能通过不同的指令打包来切换域名，每天都在测试域名和正式域名来回摩擦，后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配置文件就好，于是就有了这篇文章。

第一步 安装插件

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

第二步 新建配置文件

在项目的根目录下新建 serverConfig.json 以后会根据这个文件去生成打包的配置文件

{"ProdUrl":http://text.com}

第三步 引入generate-asset-webpack-plugin

在build/webpack.prod.conf.js中添加

 const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const serverConfig = require('../serverConfig.json')；//引入根目录下的配置文件
const createJson = function() {
 return JSON.stringify(serverConfig);
};
//plugins 中使用
 plugins: [
 //打包时生成一个配置文件
 new GenerateAssetPlugin({
  filename: 'serverConfig.json',
  fn: (compilation, cb) => {
   cb(null, createJson());
  },
 }),
]

第四步 使用配置文件中的内容

这里根据不同项目不同需求代码自行变换，我分享一下我的项目里的使用，项目中封装了axios，并对请求拦截做了处理

service.interceptors.request.use(
 async (config) => {
  var baseURL = process.env.BASE_API
  if(process.env.NODE_ENV === "production"){
  await axios.get('serverConfig.json').then( e => {
   baseURL = e.data.ProdUrl
  })
  }
  config.baseURL = baseURL
  if (store.getters.token) {
  // 让每个请求携带token
  config.headers["X-Token"] = getToken();
  config.headers = {
   "X-Token": getToken(),
   "Content-Type": "application/json-patch+json"
  };
  }
  return config;
 },
 error => {
  // Do something with request error
  console.log(error); // for debug
  Promise.reject(error);
 }
 );

变黄的部分则是获取配置文件的方法，由于是使用axios获取，是异步方法，根据情况进行处理。、

好了接下来就再也不用为了域名每天build了

打包后的目录

总结

以上所述是小编给大家介绍的webpack + vue 打包生成公共配置文件（域名） 方便动态修改,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 详解vue2.0脚手架的webpack 配置文件分析

    前言 作为 Vue 的使用者我们对于 vue-cli 都很熟悉,但是对它的 webpack 配置我们可能关注甚少,今天我们为大家带来 vue-cli#2.0 的 webpack 配置分析 vue-cli 的简介.安装我们不在这里赘述,对它还不熟悉的同学可以直接访问 vue-cli 查看 目录结构 . ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server

  • vue-cli webpack配置文件分析

    相信vue使用者对vue-cli都不会陌生,甚至可以说,很熟悉了,但对其webpack的配置可能知之甚少吧. 过完年回来后,我接手了公司的新项目.新项目是一个spa.很自然,我就想到了vue-cli脚手架了,当时研究一下它的webpack配置.于是,就有了其他的内容. 今天这篇文章,是在原来的基础上,增加了一些新版本的内容,但实质上变化不大. 说明 此仓库为vue-cli webpack的配置分析,其实只是在源码中加上注释而已.大家查看详细分析,可以从后面提到的入口文件开始查看. 分析不包括ch

  • vue-cli的webpack模板项目配置文件分析

    由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会"太折腾". 一.文件结构 本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容. ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-ser

  • 让 babel webpack vue 配置文件支持智能提示的方法

    让 babel webpack vue 配置文件支持智能提示,下面给大家介绍的非常详细,一起看看吧 如果非脚手架搭建的项目,往往需要手动配置 babel webpack. 每次都要打开官网,复制黏贴,然后一个一个配置. 如果配置也能智能提示,岂不美哉. babel 配置 如果原先是 .babelrc 配置,请改成 .babelrc.js 或者 babel.config.js 然后安装依赖 npm i -D @types/babel__core 或 yarn add -D @types/babel

  • webpack + vue 打包生成公共配置文件（域名） 方便动态修改

    需求原因 原来的项目中域名是打包到项目里面的,打包后不能动态配置,只能通过不同的指令打包来切换域名,每天都在测试域名和正式域名来回摩擦,后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配置文件就好,于是就有了这篇文章. 第一步 安装插件 npm install --save-dev generate-asset-webpack-plugin 第二步 新建配置文件 在项目的根目录下新建 serverConfig.json 以后会根据这个文件去生成打包的配置文件 {"ProdUrl&q

  • vue打包生成的文件的js文件过大的优化方式

    vue打包生成的文件的js文件过大的优化方式

    目录 vue打包生成的js文件过大优化 1.组件按需加载 2.去掉生成map文件 3.cdn引入 4.路由懒加载 5.代码压缩 6.最后 项目打包之后js文件太大问题 问题描述 1.使用cdn引入不怎么改变的第三方库 2.使用vue的懒加载 3.服务器和前端配置开启压缩 vue打包生成的js文件过大优化 1.组件按需加载 现在大多的ui库都是以组件的形式进行处理,所以只需导入需要模块的即可 2.去掉生成map文件 打包时会生成map文件,而map文件一般都比较大,可以取消生成map文件 (1)c

  • vue打包之后生成一个配置文件修改接口的方法

    前言: 我们的vue代码打包上传到服务器之后,要是数据接口 以后换了域名什么的,是不是需要重新去vue文件里修改接口. 能不能生成一个配置文件,里面可以配置域名或其它什么字段之类的,这样以后换了域名,只需打开记事本 修改一下域名即可. 教程: 第一步:安装generate-asset-webpack-plugin插件 npm install --save-dev generate-asset-webpack-plugin 第二步:配置webpack.prod.conf.js文件 //让打包的时候

  • webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改,改为 目的是将资源文件的引入路径,改为相对地址(相对index.html) 二.此时html中的js.css.img引入均没有问题,但是css中的background-image还是报404 此

  • Vue.js中用webpack合并打包多个组件并实现按需加载

    Vue.js中用webpack合并打包多个组件并实现按需加载

    前言 随着移动设备的升级.网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越.功能的增加导致的最直观的后果就是资源文件越来越大.为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码.webpack作为一种模块化打包工具,随着react的流行也越来越流行. 使用 Vue 开发项目时,如果要使用其单文件组件特性,必然要使用 webpack 或者 browserify 进行打包,对于大型应用,为了提升加载速度,可以使用 webpack 的 code split 功能

  • 浅谈webpack编译vue项目生成的代码探索

    浅谈webpack编译vue项目生成的代码探索

    本文介绍了webpack编译vue项目生成的代码探索,分享给大家,具体如下: 前言 往 main.js 里写入最简单的 vue 项目结构如下 import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', template: '<App/>', components: { App } }) App.vue 如下 <template> <div id="app"> &l

  • Vue项目总结之webpack常规打包优化方案

    由于新建项目发版打包时间大概需要 30分钟 ,发版时 严重 拖慢 下班 时间,所以特意查看了相关文档来优化打包速度,争取早点下班,^_^. 分析打包文件 要优化,先分析.我们先要知道到底是哪里拖慢我们的打包速度呢? 打包后生成文件分析 可以利用 webpack-bundle-analyzer 插件来分析我们打包后生成的文件 安装 npm i webpack-bundle-analyzer -D 使用 修改 webpack.prod.conf.js 文件 const BundleAnalyzerP

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

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

  • webpack如何打包一个按需引入的vue组件库

    webpack如何打包一个按需引入的vue组件库

    目录 前言 在项目中使用vue组件库的一般姿势 webpack实现可按需引入的组件库 接下来就是使用webpack打包 调试组件库 npm 发布 步骤非常简单,只需4步 调试组件库按需引入 总结 前言 在公司里一般有多个相同技术栈的项目,毕竟在多个项目间copy公共组件代码太繁琐,也不利于组件库的维护,所以怎么高效维护一套公共的组件代码很重要.这种情况,一般我们可以考虑封装成组件库,发布到npm上.在每个项目里只需要npm install xxx 即可使用,避免了在项目间相互copy.我们这就开

  • 浅谈webpack打包生成的bundle.js文件过大的问题

    问题 使用webpack进行打包时,发现bundle.js竟然有2M多. 解决办法 网上有去除插件.提取第三方库.压缩代码等方法. 还有一个比较容易忽略的原因就是开了sourcemap 在生产环境中,应使用devtool: false 关闭sourcemap后bundle.js的大小从2.46M降到302k 以上这篇浅谈webpack打包生成的bundle.js文件过大的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 彻底解决 webpa

随机推荐