vue如何动态配置ip与端口

目录
  • vue动态配置ip与端口
  • 动态配置IP及端口,打包后随时改随时生效
    • 一.利用public下的文件不会被打包的原理
    • 二.利用 generate-asset-webpack-plugin 插件

vue动态配置ip与端口

考虑一个成品的项目会给到各地方进行部署，而每个地方的ip和端口均无法保证统一，为了抽离开发人员的工作，需要对项目进行一定的配置，配置后的项目，只需要修改打包后的配置文件，填写相关的ip和端口，即可实现项目的部署。

由于vue打包后会生成static包、index文件，为了防止打包后混淆，可以在项目的static文件中新建IPConfig.js文件，如：

var IPConfig = window.IPConfig = {
  'IP': 'http://域名',
  'HOST': '端口号'
}

如何在项目的index文件中引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>ysa</title>
    <script type="text/javascript" src="./static/IPConfig.js" async></script>
  </head>
  <body>
    <div id="app-box"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

最后在需要使用到ip和端口的地方，直接使用即可，达到快速部署的目的

URL: IPConfig.IP + ':' + IPConfig.HOST,

项目打包后static文件中生成的文件为

成品后的项目无论在哪个地方部署，只需要修改配置文件中的ip和端口即可使用项目

动态配置IP及端口,打包后随时改随时生效

一.利用public下的文件不会被打包的原理

在pubic下生成一个json文件，在封装的axios中用原生ajax请求去获取json文件，根据自定义的环境来设置接口地址。

config.json文件

{
"url": "http://www.itcbc.com:3006/api/getbooks"

}

下面是简单写了个ajax请求，点击事件。

          var xhr = new XMLHttpRequest();
          xhr.open('GET', "./config.json",true);
          xhr.send(null);
          xhr.onreadystatechange = function () {
            if (xhr.status === 200 && xhr.readyState === 4) {
              let baseURL = JSON.parse(xhr.responseText).url
              console.log(baseURL)

              console.log(xhr)
            }
          }

然后前端打包生成dist/build目录。

生成后，要在本地测下行不行，也就是打包后如何在本地启动服务运行。

1、全局安装live-server插件

npm install -g live-server

2、在dist/build文件夹（刚刚打包成功后多出来的文件夹）终端输入

live-server

效果图：

然后修改config.json里的url，点击事件后，打印的url会变。

二.利用 generate-asset-webpack-plugin 插件

使用 generate-asset-webpack-plugin 插件，配置一大堆文件，通过请求获取数据，安全性高，但过程麻烦。（网上看的，我没试过）

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目的访问端口及其设置方式

    目录 vue项目访问端口及设置 vue项目的访问端口 端口变化及其设置 vue项目配置端口号 新建 vue.config.js vue项目访问端口及设置 vue项目的访问端口 vue项目目录下config文件夹中的index.js文件 端口变化及其设置 // can be overwritten by process.env.PORT, if port is in use, a free one will be determined ※ 如果不进行端口号修改,默认端口8080,如果端口占用,则会

  • Vue开发环境中修改端口号的实现方法

    Vue开发环境中修改端口号 如上图所示,在开发环境中,8080便是端口号,这也是使用Vue脚手架创建的项目运行时的默认的端口. 1.Vue 2.x config文件夹中有一个index.js其中部分内容如下,port即为端口号,在这里更改即可. module.exports = { dev: { env: require('./dev.env'), port: 8080, // 端口号 assetsSubDirectory: 'static', assetsPublicPath: '/', pr

  • Vue修改项目启动端口号方法

    在项目的package.json中可以找到如下代码 start属性指定的文件就是通过开发模式启动的服务文件 "scripts": { "dev": "node build/dev-server.js", "start": "node build/dev-server.js", "build": "node build/build.js", "lint&quo

  • vue插件及修改ip启动端口解析

    vue插件及修改ip启动端口解析

    目录 element-ui插件 环境搭建: jq+bs插件 一.jq环境搭建: 二.bs环境搭建: 修改ip启动端口 element-ui插件 element-ui就类似于BootStrap框架,前者是在vue项目中运用,后者是在原生项目中运用,当然也可以在vue项目中运用 环境搭建: 1)安装:在前端项目根目录下的终端cnpm install element-ui 2)配置:main.js //element-ui环境import ElementUI from 'element-ui'Vue.

  • vue如何动态配置ip与端口

    目录 vue动态配置ip与端口 动态配置IP及端口,打包后随时改随时生效 一.利用public下的文件不会被打包的原理 二.利用 generate-asset-webpack-plugin 插件 vue动态配置ip与端口 考虑一个成品的项目会给到各地方进行部署,而每个地方的ip和端口均无法保证统一,为了抽离开发人员的工作,需要对项目进行一定的配置,配置后的项目,只需要修改打包后的配置文件,填写相关的ip和端口,即可实现项目的部署. 由于vue打包后会生成static包.index文件,为了防止打

  • Vue+webpack项目配置便于维护的目录结构教程详解

    新建项目的时候创建合理的目录结构便于后期的维护是很重要 环境:vue.webpack 目录结构: 项目子目录结构 子目录结构都差不多,主要目录是在src下面操作 src目录结构 src/common 目录 主要用来存放公共的文件 src/components 主要用来存放公共的组件 src/config 用来存放配置文件,文件目录如下 src/config/index.js 配置目录入口文件 import api from './website' // 当前平台 export const HOS

  • vue.js+element-ui动态配置菜单的实例

    如下所示: <!--导航菜单-折叠功能--> <aside :class="collapsed?'menu-collapsed':'menu-expanded'"> <!--单个激活 并以 index 作为 path 进行路由跳转--> <el-menu unique-opened router v-show="!collapsed"> <!--动态路由到子组件 将不可见的路径隐藏--> <templ

  • vue项目中运用webpack动态配置打包多种环境域名的方法

    在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法.(欢迎纠错,谢谢.) 1. 安装插件 cross-env,npm install cross-env --save -dev,用于配置命令行输入命令. 2. 修改package.json里的script命令: 配置了test(测试),ready(预发布),prod(正式)三种环境,npm run build 默认设置成 npm run build:p

  • Scrapy 配置动态代理IP的实现

    应用 Scrapy框架 ,配置动态IP处理反爬. # settings 配置中间件 DOWNLOADER_MIDDLEWARES = { 'text.middlewares.TextDownloaderMiddleware': 543, # 'text.middlewares.RandomUserAgentMiddleware': 544, # 'text.middlewares.CheckUserAgentMiddleware': 545, 'text.middlewares.ProxyMid

  • 如何在logback日志配置里获取服务器ip和端口

    目录 logback日志配置获取服务器ip和端口 1.新建一个类继承ClassicConverter 2.在配置文件logback.xml增加如下配置 3.在需要用到ip的位置这样写: %ip 4.获取端口号,同理 让Logback日志中显示主机名与IP地址及一切你想显示的 1.创建 2.重新方法 3.配置logback.xml logback日志配置获取服务器ip和端口 1.新建一个类继承ClassicConverter 在方法中获取服务器ip package com.xxx.xxx.xxx.

  • Win2003 Server安全配置完整篇 端口关闭第1/3页

    一.先关闭不需要的端口 我比较小心,先关了端口.只开了3389 21 80 1433有些人一直说什么默认的3389不安全,对此我不否认,但是利用的途径也只能一个一个的穷举爆破,你把帐号改了密码设置为十五六位,我估计他要破上好几年,哈哈!办法:本地连接--属性--Internet协议(TCP/IP)--高级--选项--TCP/IP筛选--属性--把勾打上 然后添加你需要的端口即可.PS一句:设置完端口需要重新启动! 当然大家也可以更改远程连接端口方法: Windows Registry Edito

  • Sentinel实现动态配置的集群流控的方法

    Sentinel实现动态配置的集群流控的方法

    介绍 为什么要使用集群流控呢? 相对于单机流控而言,我们给每台机器设置单机限流阈值,在理想情况下整个集群的限流阈值为机器数量✖️单机阈值.不过实际情况下流量到每台机器可能会不均匀,会导致总量没有到的情况下某些机器就开始限流.因此仅靠单机维度去限制的话会无法精确地限制总体流量.而集群流控可以精确地控制整个集群的调用总量,结合单机限流兜底,可以更好地发挥流量控制的效果. 基于单机流量不均的问题以及如何设置集群整体的QPS的问题,我们需要创建一种集群限流的模式,这时候我们很自然地就想到,可以找一个 s

  • vue如何获取配置代理文件中的api地址值

    vue如何获取配置代理文件中的api地址值

    目录 获取配置代理文件的api地址值 带你了解vue中的API 全局API Vue 实例中的选项 实例属性与方法 特殊的属性 获取配置代理文件的api地址值 一般vue项目中,前后端服务接口调试数据,需要配置api的代理.在代理文件config/index.js中,配置 后台服务的IP地址.如图. 如果想在某个页面上查看,代理的该IP地址. 则在该页面上引入配置文件,在找到对应的值. 引入 import API_CONFIG from "../../../config/index.js"

随机推荐