在vue-cli创建的项目里加一个全局变量(发布后可修改的)

664 阅读1分钟

日常开发中可能会有例如后端请求路径动态生成,或者根据不同的打包环境读取不同的配置文件的需求。如果在开发阶段能获取到环境对应的地址,则可以通过设置环境变量进行指定不同的配置,但是有时候可能是前端打包完成,需要部署的时候才知道请求地址,这时候可能就需要一个可以在build后的文件里面修改配置的文件,可以参考如下操作:

步骤一

public下创建 static/【文件名】.js

13cbbf422dd9c931d99366974dcdee2.png

步骤二

在新建的文件里面定义全局变量(建议通过作用域指定一个不会重复的变量名称,避免污染其他全局变量)

89749b9adcc1dabfee6014a57c3e671.png

步骤三

在public/index.html内引入该文件,注意放在image.png 这句话之前,确保打包后的文件都能读取该变量

6804aab0b9aafe3cd6c2a3fd070d8dc.png

步骤四,打包

此为打包后dist的文件夹的内容,static里面的文件会原封不动拷贝过来,大功告成

2986ee91e49ecd240db0306a7c96f13.png

步骤五

无需引入,无需定义,在src的其他文件里面直接读取就好啦

image.png