vuecli 编译后部署_基于vue-cli 打包时抽离项目相关配置文件详解

前言：当使用vue-cli进行开发时时常需要动态配置一些设置，比如接口的请求地址(axios.defaults.baseURL)，这些设置可能需要在项目编译后再进行设置的，所以在vue-cli里我们需要对这些配置文件进行抽离，不让webpack把配置文件也进行编译。

首先，我们需要在/static 下面新建一个js文件作为配置文件

里面的内容如下：

window.g={

AXIOS_TIMEOUT:10000,

SERVICE_CONTEXT_PATH:`http://10.200.199.84:9090/`//配置服务器地址

}

这里将所有的配置注入到window对象的一个属性里面，你可以自定义这个属性

然后在index.html里面引入这个js

在项目中使用时，直接使用window.g去调用这个配置文件的内容。

如此配置之后进行打包时，会产生这样的效果

可以看到这里的配置文件会原样输出不会打包，那么当我们把编译好的前端工程交给部署人员去部署的时候，就不用事先问号后台地址了，部署人员可以直接通过修改配置里面的内容去决定服务器的地址。

所以通过这种方式可以把项目相关配置文件抽离开来

以上这篇基于vue-cli 打包时抽离项目相关配置文件详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

vuecli 编译后部署_基于vue-cli 打包时抽离项目相关配置文件详解相关推荐

python os模块安装方法_基于python中pygame模块的Linux下安装过程(详解)
一.使用pip安装Python包大多数较新的Python版本都自带pip,因此首先可检查系统是否已经安装了pip.在Python3中,pip有时被称为pip3. 1.在Linux和OS X系统中检查 ...
为什么python打包的应用那么大_浅谈python3打包与拆包在函数的应用详解
1.序列(拆包) *用作序列拆包:*可对字符串.列表.集合.元组.字典.数字元素等序列进行拆包 print(*(1,2,3,4,5,6)) #1 2 3 4 5 6 print(*[1,2,3,4,5 ...
基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
python中pygame模块下载_基于python中pygame模块的Linux下安装过程(详解)
pyhthon中pygame模块怎么安装?pyhthon中pygame模块怎么安装?鄙人为初二一名学生,闲来无事钻研起电这句话还是建议问一下你们代课老师吧,因为你们老师是这方面专家,诺儿那边的话肯定 ...
java 实现违章_基于JAVA的违章查询助手数据调用代码实例详解
[Java]代码 import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; ...
vue族谱架构_基于 Vue 实现动态家谱图/组织结构图
Vue-Tree-Chart 最近一个项目里有个前端绘制家谱图的需求,大概是下面这个样子: 点击节点会弹出操作菜单,实现增删改查等操作,查阅网上资料发现,现有案例基本都是基于orgchart这个jQu ...
vue部门结构图_基于 Vue 实现动态组织结构图
基于 Vue 实现动态组织结构图最近一个项目里有个前端绘制家谱图的需求, 大概是下面这个样子: 点击节点会弹出操作菜单, 实现增删改查等操作, 查阅网上资料发现, 现有案例基本都是基于 orgcha ...
用uwsgi和nginx 部署 django和vue打造的前后端分离项目
用uwsgi和nginx 部署 django和vue打造的前后端分离项目前言由于现在没有彻底掌握nginx的使用,部署起来有点磕磕绊绊,为了防止以后再次需要部署的时候无法快速找到适合的资料,以此文 ...
Vue CLI 3 多页应用项目的搭建
在项目初期时,从零开始搭建和配置本地前端开发环境是一项很繁琐的工作,需要考虑到项目目录结构.项目基本配置.Webpack 配置等等.通过 Vue CLI 3 可以快速的生成一个项目,这样我们就可以专注 ...

vuecli 编译后部署_基于vue-cli 打包时抽离项目相关配置文件详解

vuecli 编译后部署_基于vue-cli 打包时抽离项目相关配置文件详解相关推荐

最新文章

热门文章