转自:https://www.jianshu.com/p/377bfd2d9034

1、问题初衷

解决问题的初衷,源于vue项目中公共路径在打包之后一旦遇到整体的路径更改就需要再次build一下。 如果公司小,项目部署的实施人员又能随时联系到开发人员。直接简单的build一下就OK了。又或者开发人员自己直接就解决一下也行。但是公司一旦大,这期间的沟通,联络等等,顺利的话还行,不顺利呢。也不能让实施人员干等着。 要是实施人员不用等开发人员用源码重新build的话,直接有一个外部的文件,直接修改。就能解决这期间的问题的话。那将大大的提高效率。

2、解决方案

第一步:安装generate-asset-webpack-plugin插件

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

第二步:在根目录下添加serverConfig.json的配置文件

(注:哪些公共的觉得有必要的都可以用jsonde 形式写在里面)

第三步:在build/webpack.prod.conf.js文件里引入generate-asset-webpack-plugin

const GeneraterAssetPlugin = require('generate-asset-webpack-plugin')

第四步:引入添加的serverConfig.json文件

const serverConfig = require('../serverConfig.json')

第五步:添加打包时写入配置文件的代码

const createJson = function(compilation) {
return JSON.stringify(serverConfig);
};

第六步:添加打包时输出配置文件的代码

  new GeneraterAssetPlugin({
filename: 'serverConfig.json',//输出到dist根目录下的serverConfig.json文件,名字可以按需改
fn: (compilation, cb) => {
cb(null, createJson(compilation));
}
})

第七步:在main.js中添加读取build之后的代码

Vue.prototype.getConfigJson = function () {
Vue.prototype.$axios.get('serverConfig.json').then((result)=>{
console.log(result);
Vue.prototype.baseUrl =result.data.baseUrl;//设置成Vue的全局属性
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
}).catch((error)=>{
console.log(error)
})
}
Vue.prototype.getConfigJson()//调用声明的全局方法

第八步:项目中引用

this.baseUrl+'/123'

注:

npm  run  build

项目生成的结构:

其中生成的serverConfig.json

这里面的地址就可以随意更改了,不再需要再次build

webpack 配置文件外置的更多相关文章

  1. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  2. 调试webpack配置文件

    webpack运行在nodejs上,调试webpack就相当于调试nodejs程序.下面介绍一种通用的办法. 1.配置package.json,加一个debug. { 'scripts': { 'de ...

  3. webpack 配置文件相关解说

    博客地址:https://ainyi.com/10 webpack - 什么是webpack: WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它 ...

  4. react暴露webpack配置文件

    在react中安装create-react-app脚手架新建项目,但是新建的项目中没有配置文件. webpack的配置文件webpack.base.conf.js隐藏在了node_modules文件夹 ...

  5. 为什么我们要做三份 Webpack 配置文件

    时至今日,Webpack 已经成为前端工程必备的基础工具之一,不仅被广泛用于前端工程发布前的打包,还在开发中担当本地前端资源服务器(assets server).模块热更新(hot module re ...

  6. springboot配置文件外置处理

    前言: 在springboot项目中,一般的配置文件都在resource/config下面,它可以以两种方式存在,一种是yml,一种是properties方式. 当运维和开发分开的时候,比如连接mys ...

  7. webpack实践(二)- webpack配置文件

    webpack系列博客中代码均在github上:https://github.com/JEmbrace/webpack-practice <webpack实践(一)- 先入个门> < ...

  8. 3.WebPack配置文件

    一.为什么需要WebPack配置文件 引用自官方: 在 webpack 4 中,可以无须任何配置使用,然而大多数项目会需要很复杂的设置,这就是为什么 webpack 仍然要支持 配置文件.这比在终端( ...

  9. 二:搭建一个webpack3.5.5项目:建立项目的webpack配置文件

    第一步: npm init -y [初始文件] npm info webpack / bower info webpack[查看版本,用bower的时候要先 npm install bower] np ...

随机推荐

  1. MySql:Navicat 连接不上虚拟机上的mysql容器

    1.问题显示 通过windows主机navicat连接虚拟的mysql时报如下错误. 2.问题原因 由于navicat版本的问题,出现连接失败的原因:mysql8 之前的版本中加密规则是mysql_n ...

  2. 2021最新WordPress安装教程(二):安装PHP和MySQL

    这是 2021最新WordPress安装教程系列的第二篇文章,前一篇文章< 2021最新WordPress安装教程(一):Centos7安装Apache>已经完整的介绍了如何在Centos ...

  3. PYTHON 得到光标处的句柄

    import win32api import win32gui import time if __name__ == '__main__': while True: point = win32api. ...

  4. 一个很多人不知道的SpringBoot小技能!!

    大家好,我是冰河~~ 最近,发现很多小伙伴在修改了SpringBoot的配置文件后,都要重新编译整个项目,极大的浪费了开发时间.我身边就有很多小伙伴一直是这样做的.那么,有没有什么方式能够修改配置文件 ...

  5. 【剑指offer】50.数组中重复出现的数字

    50.数组中重复出现的数字 知识点:数组:Set的不可重复性 题目描述 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重 ...

  6. box-shadow详解

    今天课堂上有学生问到box-shadow这个属性,那么下面我们就来详细的解说下这个属性它的用法,box-shadow是css3中的一个属性,它可以向框添加一个或多个阴影. 首先我们来看它的语法: bo ...

  7. python + csv 操作(读写)

    import csv"""与excel文件不同,csv文件中:1.数据都没有数据类型,值都是'字符串'2.没有颜色和样式,不能指定单元格测的宽高,不能合并单元格3.没有对 ...

  8. CentOS7创建个人系统启动服务项的方法

    CentOS7.6自定义系统启动项的方法(类似busybox里面的inittab)1.编写属于自己的unit服务文件,命令为my.service[Unit]Description=My-demo Se ...

  9. P4293 [WC2010]能量场

    P4293 [WC2010]能量场 题意 给你 \(n\) 个粒子,每个粒子有两个权值 \(m_i,c_i\) 每个相邻有序对 \((a,b)\) 会产生 \(m_am_b(c_a-c_b)\) 的贡 ...

  10. Git的使用(六)

    前言 版本管理工具总结: 开发团队项目,对项目的版本进行管理. 使用过的版本管理工具: TFS.SVN与Git. TFS:管理项目,通过visual Studio管理源码,拉取分支,提交代码等.也可以 ...