vue项目添加打包后可手动修改的config

由于项目需要,要将文件打包放到 tomcat 下运行并且访问服务端的IP地址需要手动更换,所以打包后要有一个可以手动修改的config文件。
根据 Vue-cli 版本不同,共有两种方式

【第一种】

index.html 文件在 public 文件夹下

index.html 文件内容:

index.html

目录结构:

在这里插入图片描述

  1. public 文件夹下创建 config.js,如上图
  2. config 中添加信息
	var ip = "localhost";
	var port = "8080";
  1. index.html 文件中引用
<script src="./config.js" charset="UTF-8"></script>
  1. 调用方式
let ip = window.ip;
let port = window.port;
  1. 打包后
    在这里插入图片描述

【第二种】

index.html 在根目录下,处理方式与第一种基本相同

在这里插入图片描述

  1. static 目录下创建 config.js

在这里插入图片描述

  1. 编写 config.js
	var ip = "localhost";
	var port = "8080";
  1. index.html 中引入,注意路径
<script src="static/config.js" charset="UTF-8"></script>
  1. 调用
let ip = window.ip;
let port = window.port;
  1. 打包后

在这里插入图片描述

另外,需要注意 config/index.js 中的配置

在这里插入图片描述

在这里插入图片描述
assetsPublicPath 后要加 .

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值