vue实现打包后部署文件之后可以动态修改页面所需的参数,可以用于动态修改接口地址

当vue项目进行打包之后,public文件夹中的文件会全部被打包进项目中,因此我们可以需要的东西存放到public中的static文件夹下(自己创建),以便打包生成到项目中,在打包的项目可以进行访问。接下来进入实际的使用操作。
1.首先在public/static中新建一个config.js的文件。
在这里插入图片描述
2.在文件中写入需要的参数变量。

window.config = {//config这个值可以是任意值,在widow调用时保持一致就行
    staticVlue: 'static 中的值'
}

3.在public/index.html中引入该文件

//引入js文件使用
<script type="text/javascript" src="<%= BASE_URL %>static/config.js"></script>

4.在页面中调用js中的值,通过window.config.值名称来调用config文件中的值。(注:这个调用跟config.js的文件名称无关)

//将config中的变量赋值给页面要显示的数据
this.value=window.config.staticVlue

5.在页面中进行显示

<span style="color: red">value:{{value}}</span>

6.运行本地项目的结果
在这里插入图片描述
7.打包运行并在nginx上查看结果
7.1打包之后的目录结构
在这里插入图片描述
7.2nginx上运行的结果在这里插入图片描述
7.3在打包文件中修改参数的值为nginx上static 中的值在进行刷新页面
在这里插入图片描述

window.config = {
    staticVlue: 'nginx test static 中的值'
}

以上就是在打包文件之后还可以动态修改值的方法,如果觉得有用请多多关注点赞,博主会分享自己使用的过程中遇到的难点问题,大家共同进步!

附:展示页面的代码

<template>
    <div>
        <span style="color: red">value:{{value}}</span>
    </div>
</template>

<script>
    export default {
        name: "test",
        data(){
            return{
                value: ''
            }
        },
        mounted() {
            //将config中的变量赋值给页面要显示的数据
            this.value=window.config.staticVlue
        }
    }
</script>

<style scoped>

</style>

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值