当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>