专栏首页授客的专栏Vue 新增不参与打包的接口地址配置文件

Vue 新增不参与打包的接口地址配置文件

Vue 新增不参与打包的接口地址配置文件

by:授客

开发环境

Win 10

Vue 2.5.2

问题描述

vue工程项目,npm run build webpack方式打包,每次打包后如果需要更改后台接口地址(项目中,接口地址设置成变量,存放在js文件中,需要用到的地方导入),都需要重新打包,比较麻烦,所以,想给项目增加个配置文件,打包后如果要更改接口地址,修改该文件即可。

解决方法

创建config.js

项目根目录/static目录下,创建config.js文件,内容如下:

;(function(env) {

// 开发环境接口服务器地址

const dev = {

API_BASE_URL:"http://localhost:8000"

}

// 线上环境接口服务器地址

const prod = {

API_BASE_URL:"http://10.xxx.xx.xx:8001"

}

if (env == "dev") {

return dev

} else if (env == "prod") {

return prod

}

})("dev")

修改main.js

import axios from "axios"

...略

let myConfigPath = "/static/config.js"

if (process.env.NODE_ENV === "development") {

myConfigPath = "../static/config.js"

}

axios.get(myConfigPath, { headers: { "Cache-Control": "no-cache" } }).then(response => {

Vue.prototype.$apiBaseURL = eval(response.data).API_BASE_URL

new Vue({

el: "#app",

router,

store, // 注入 store

components: { App },

template: "<App/>"

})

})

如上,先通过请求,获取config.js文件内容 response.data,然后通过eval(response.data)文件内容当做代码执行,进而获取js中函数返回的内容,即我们需要的配置,并挂载在Vue的prototype上,就可以在每个 Vue 的实例中使用。这里把vue创建实例放在获取config.js配置文件之后主要是因为axios异步请求的缘故。

注意,这里不能不能使用import,一定要发起网络请求,去请求这个js文件,否则build时,webpack会将此配置文件应当输出的值写死在压缩之后的js中,之后去动手修改dist/static中的配置文件就不起作用了。

另外,添加{ headers: { "Cache-Control": "no-cache" } }请求头,防止浏览器从磁盘缓存读取,导致后台更改了配置,前台读取的还是旧的文件。

npm run build后,config.js位于dist/static目录下,项目线上环境nginx 静态文件路由关键配置如下:

location / {

root /opt/TMP/frontend/dist; #这里的dist存放的就是上述打包的路径

...

实践表明,使用nginx部署的情况下,myConfigPath 不能设置为 "./static/config.js",只能设置为myConfigPath = "/static/config.js",即配置为绝对路径,否则刷新某些页面的情况下,会请求不到config.js

以下为配置myConfigPath 为 "./static/config.js"的情况下,执行二级页面的刷新操作(页面URL:http://10.1xx.xx.xx/testerView/testCaseManagement,根据我的项目程序设计,此操作会先访问二级路由页面testerView),查看nginx日志,发现如下,请求找不到:

引用配置

本例中,在自己封装的axios.js中使用该配置

import axios from"axios"

import Vue from "vue"

...略

function request(options) {

return new Promise((resolve, reject) => {

const instance = axios.create({

baseURL: Vue.prototype.$apiBaseURL,

headers:config.headers,

timeout:config.timeout,

withCredentials:config.withCredentials,

responseType:config.responseType

})

...略

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Fiddler 使用fiddler发送捕获的请求及模拟服务器返回

    本例的一个目的是,根据服务器返回js脚本名称,有选择的让浏览器执行本地的js脚本文件。

    授客
  • Easyui datagrid 修改分页组件的分页提示信息为中文

    直接引入中文locale目录下的easyui-lang-zh_CN.js,引入时注意js的引入顺序,避免js直接的相互影响,比如后面引入的js覆盖前面引入的js

    授客
  • Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结

    Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结

    授客
  • 腾讯云独家详解小程序多人视频通话

    在微信小程序中搜索 腾讯视频云 可以加载到我们的演示用小程序,其中 多人音视频 功能可用于体验和测试多人音视频通话功能。出于 UI 美观和画面大小的考虑,Dem...

    腾讯视频云终端团队
  • smartClient 1--框架介绍

    一、是什么(以下简称SC)     smartClient 是一个基于web技术的开发框架,主要包括: 一个无需安装的 Ajax/HTML5 客户端引擎 UI组...

    用户1148399
  • RequireJS实例分析

      随着JS越来越庞大,已经不仅仅是以前复制粘贴做特效的时代了,JS越来越偏向于业务逻辑与应用。恰逢Node的流行,JS在web开发中占有越来越重要的地位。由...

    用户1154259
  • 在微信小游戏中使用three.js显示3D图形

    笔者之前从未接触过微信小程序和WebGL的开发,但是却一直有留意相关技术的发展,大概听说原来微信小程序是不支持WebGL 3D技术的。这次借着微信大力推广小游戏...

    bering
  • JavaScript常用对象&属性&事件-图标

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • 对于零基础同学来讲,javascript有多难掌握?

    你是零基础,那么你用什么方式,可以快速的实现js的运用自如呢? Javascript是一门脚本语言,它没有复杂的内存管理,只有一个进程,变量随便什么都可以储存...

    web前端教室
  • 利用js文件反弹shell

    前两天在freebuf上看到一个利用Ink文件触发攻击链的文章,确实佩服作者的脑洞。

    洛米唯熊

扫码关注云+社区

领取腾讯云代金券