vue打包后的项目动态修改服务器地址,无需重新打包

vue项目打包后的项目动态修改服务器地址,无需重新打包

这个问题很好实现,但是在纠结一个问题,vue打包分环境npm run dev/npm run stage…那怎么实现使用不同的命令打完的包只改配置文件就可以生效?
目前采用的方式是:npm run stage打包,那打包后的环境就是staging,判断是staging的时候就读取配置文件

1. 在public下创建config.js文件
vue打包后的项目动态修改服务器地址,无需重新打包_第1张图片
**2. 在public/index.html中引入 **
vue打包后的项目动态修改服务器地址,无需重新打包_第2张图片
3. 在使用的地方时候,我是在main.js中全局方法挂载了下

Vue.prototype.processEnv =
  process.env.NODE_ENV === "staging" ? window.global_config : process.env;

在这里插入图片描述
**4. 在具体使用的地方需要调用config.js的属性,直接这样使用
** this.urlPath = Vue.prototype.processEnv.VUE_APP_BASE_URL_NOPORT
在这里插入图片描述

你可能感兴趣的:(vue.js,前端,javascript)