基于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

<script src="/static/js/config.js"></script>

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

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

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

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

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

您可能感兴趣的文章:

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

相关推荐

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

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

  • 基于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

  • 基于Vue实现可以拖拽的树形表格实例详解

    因业务需求,需要一个树形表格,并且支持拖拽排序,任意未知插入,github搜了下,真不到合适的,大部分树形表格都没有拖拽功能,所以决定自己实现一个.这里分享一下实现过程,项目源代码请看github,插件已打包封装好,发布到npm上 本博文会分为两部分,第一部分为使用方式,第二部分为实现方式 安装方式 npm i drag-tree-table --save-dev 使用方式 import dragTreeTable from 'drag-tree-table'  模版写法 <dragTreeTa

  • Vue+Koa2 打包后进行线上部署的教程详解

    最近使用Vue和Koa2重构了自己的博客,过程中踩了不少坑,查了很多资料,最后总算成功上线.之后我计划围绕这个过程写一系列文章,讲讲如何用Vue+Koa2写一套网站. 而现在,先来讲讲最后一步,在写完Vue和Koa2后,如何将它们部署到线上. 1.将Vue和Koa2结合 很多人在打完包后就不知道怎么做了,毕竟后面都是后端的事情.如果你用的是Vue-cli3.0,那么打包这一步会非常简单,只需要执行一条命令即可,其它的不用关心: npm run build 之后会生成一个dist的文件夹,将它放到

  • 基于vue.js中事件修饰符.self的用法(详解)

    .self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>self</title> <script src="vue.js"></script> <!--'''''''

  • vue相关配置文件详解及多环境配置详细步骤

    1.package.json 作用: package.json 文件其实就是对项目或者模块包的描述,里面包含许多元信息.比如项目名称,项目版本,项目执行入口文件,项目贡献者等等.npm install 命令会根据这个文件下载所有依赖模块. 文件结构如下: { "name": "sop-vue", "version": "0.1.0", "author": "zhangsan <zhangsa

  • 基于Angular中ng-controller父子级嵌套的相关属性详解

    ng-controller是为应用变量添加控制器 当有两个控制器father.child且child 在 father内,那child 可以称为子控制器,它将继承父控制器father的scope.child就可以访问到father的scope中的所有函数和变量. 例: <div ng-controller="father"> <div >name1:{{ name1 }}</div> <div ng-controller="child

  • Vue CLI中模式与环境变量的深入详解

    Vue CLI中模式与环境变量的深入详解

    前言 在实际项目的开发中,我们一般会经历项目的开发阶段.测试阶段和最终上线阶段,每一个阶段对于项目代码的要求可能都不尽相同,那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果,使用不同的功能呢? 这里就需要引入环境的概念.官方文档中模式和环境变量说明 一般一个项目都会有以下 3 种环境: 开发环境(开发阶段,本地开发版本,一般会使用一些调试工具或额外的辅助功能): 测试环境(测试阶段,上线前版本,除了一些 bug 的修复,基本不会和上线版本有很大差别): 生产环境(上线阶段,正式对

  • Vue脚手架安装时遇到的无法安装问题详解

    Vue脚手架安装时遇到的无法安装问题详解

    目录 项目场景: 问题描述 原因分析: 解决方案: 总结: 项目场景: 安装Vue的脚手架时遇到的无法安装问题 问题描述 以管理员身份进入命令控制符想要安装Vue的脚手架,提示安装成功后输入vue指令检查却显示:‘vue’ 不是内部或外部命令,也不是可运行的程序或批处理文件. 原因分析: 安装node.js依赖环境时环境配置有问题 解决方案: 解决步骤: 1.输入cmd进入命令控制符面板 2.输入npm -v检查node.js环境是否已经配置好 当显示版本号时说明npm已成功安装(8.5.5是我

  • vue使用axios时关于this的指向问题详解

    前言 众所周知axios是vue-resource后出现的Vue请求数据的插件.vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios.更多的详细介绍大家可以参考这里://www.jb51.net/article/109444.htm 本文主要介绍了关于vue使用axios时this的指向问题,下面话不多说了,来一起看看详细的介绍吧. 1.解决办法 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函

  • 基于Vue自定义指令实现按钮级权限控制思路详解

    思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息). 权限验证:通过token获取用户对应的 role,自定义指令,获取路由meta属性里btnPermissions( 注: meta.btnPermissions是存放按钮

随机推荐