vue 引入静态json文件打包后文件内容未被修改

最新推荐文章于 2024-06-13 17:08:26 发布
最新推荐文章于 2024-06-13 17:08:26 发布
阅读量2.6k 收藏 7
点赞数
分类专栏： 前端bug 文章标签： javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36939346/article/details/106120388
版权

emmm...很坑，一开始就是单纯的引入json文件，发现打包后修改json文件但是并未更新，最后又换成了还使用axios引入，但是会有异步的问题一直解决不了。后来发现了个简单的办法。。

把json文件改成js，里面的放的还是json，然后index.html里面script引入，然后赋值给Vue.prototype全局直接使用

静态文件

index里面引入

然后要用的地方

Vue.prototype.$dict = window.dict
console.log(Vue.prototype.$dict.API_URL)

 

西鱼
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
VUE项目打包后上传IIS后JSON文件读不出来
qq_38596005的博客
11-27 948
VUE项目打包后上传IIS后JSON文件读不出来 情况如下， 后来发现是我的电脑使用的WIN7系统，IIS可能是版本太低，所以没有JSON的MIME类型，需要手动添加 添加步骤如下 1、如下图在左边选择你要设置的网站，在IIS中选择MIME类型，双击进入。 2、进入后选择搞作中添加，会弹出添加MIME类型对话框，在文件扩展名中输入".json",在MIME类型中输入"text/json”或者“...
vue 加载静态json文件打包后更换json内容不起作用
西鱼的博客
04-24 3762
之前是向下面直接把json文件引入，但是打包以后，调取的json文件还是未改之前的内容。所以找到了别的办法。 import api from '../../static/serverConfig.json' 然后找到了办法，引入了一个js 然后在要用的页面 import {$getJson} from './http' const getH5StaticJson = data =...
vue技巧（十）全局配置使用（打包后可修改配置文件）
最新发布
Interest1_wyt的博客
06-13 985
vue js或json全局配置使用，打包后保持配置文件不变，支持打包后修改配置文件内容
vue打包之后更改配置的json文件无效
派大星球
08-20 2838
vue打包之后更改配置的json文件无效 坑……在vue项目，给public底下放置了一个静态的config.json文件，用来配置代理ip地址和系统的标题等相关配置，以便于在部署时进行相关更改，但是在部署时只有更改ip配置生效。具体问题如下： public下添加的config.json文件 vue.config.js文件中引入json文件，并设置配置的代理ip 登录页面引入json文件，并使用配置标题 打包之后的json文件 然后坑就出现了，在打包之后，更改打包后的json配置的ip地址生效
关于 打包后出现的问题(import与require导入json文件打包加载，再在服务器上修改json内容，页面并没加载)
WACBG的博客
03-31 2602
加载静态JSON文件打包后更换JSON内容不起作用
vue完成项目后,打包成静态文件的方法
10-18
在项目开发完成后，通常需要将 Vue 项目打包成静态文件，以便部署到服务器上运行。这里我们将详细介绍如何使用 Vue CLI 工具来实现这一过程，以及如何利用 Node.js 进行本地调试。 首先，你需要确保已经安装了 Vue ...
在vue中读取本地Json文件的方法
10-18
在Vue.js应用中，有时我们需要从本地加载JSON文件来获取数据，这在开发阶段或处理静态数据时尤其有用。在本文中，我们将详细介绍如何在Vue中读取本地JSON文件。 首先，要实现这一功能，我们需要引入一个外部插件...
vue 打包后的文件部署到express服务器上的方法
08-29
要让Express服务器提供打包后的Vue应用，需在`app.js`中引入`path`模块，并使用`express.static()`中间件。将`dist`目录设置为静态资源目录，这样Express就能正确地服务Vue应用的静态文件。 5. **修改package.json...
如何配置vue.config.js 处理static文件夹下的静态文件
10-15
保存`vue.config.js`后，重新运行`npm run build`或`yarn build`，静态文件如`test.json`就会被正确地复制到构建输出目录，从而可以在运行时正常访问。 需要注意的是，这种方法适用于处理`static`文件夹中的所有...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
Webpack是一个模块打包工具，它能够将JavaScript、CSS、图片等资源文件转换并整合到一起，生成适合部署到生产环境的静态资源。然而，在实际的项目开发过程中，可能会遇到一些问题，比如在本例中提到的`iconfont`图标...
Vue 设置添加 JSON 视图不更新
weixin_33766168的博客
08-30 588
1 　　　　　　 for (let i = 0; i < this.gotup.length; i++) { 2 const element = this.gotup[i]; 3 console.log(element); 4 if (element) { 5 ...
vue json新增的属性修改无法在页面中实时更新
qq_40419454的博客
09-18 1260
新增属性时使用this.list[index].isCheck=this.$set(this.list[index],‘isCheck’,true);
vue项目打包之后放在服务器上测试的时候访问不到本地json数据的解决方法
inticaler的博客
05-08 3113
上面的代码表示在本地开发项目时模拟后端数据。项目打包之后放在服务器上，json的路径需要按照原来的json实际路径放置才会访问到（/api/index.json）
vue3+vite本地json文件打包与读取时遇到的问题
m0_72072486的博客
04-19 1293
若是放在src文件夹下在打包的时候本地json文件打包不进去。推荐把本地json文件放在public文件夹中。本地json数据在vue3中可以直接读取。
vue-cli 3.0更改打包配置
weixin_46191846的博客
08-21 939
在实际项目开发中，我们一般会直接使用vue、vue-cli来搭建项目。vue框架的宗旨就是让初学者轻松上手，所以，对于打包配置的一些东西，vue的脚手架已经帮我们做好了完美的封装，让我们达到安装既用的效果，也不用担心太多不会做打包配置的问题。 在前期使用Vue-CLI2.0搭建项目时，我们可以在build目录下，直接修改webpack配置项。 但在Vue-CLI3.0中已经帮我们对webpack配置做了二次封装，在使用3.0版本搭建项目时，我们并不需要去关心原生webpack的配置，只需要查看Vue-CLI
vue 封装print-js打印页面数据、页面样式
weixin_41931561的博客
06-17 4655
npm install print-js --save
Vue加载json文件
Upxuans的博客
03-12 2599
Vue加载json文件 链接: https://www.cnblogs.com/xsphehe/p/6938438.html.
android应用开发过程中更换资源文件不刷新（显示旧资源文件）问题
modabobo
04-09 460
问题描述: 我们在开发android app项目的时候，经常会遇到需求更改和UI更改的情况，这样我们就需要将已经写好的界面中的元素换掉，例如将界面中的背景图或者某个图片换掉，这时，问题便出现了：在更换完图片资源之后，我们会发现，在手机上面显示的还是原来没有更换过时的图片(旧图片)，没有显示新图片资源。 产生原因&amp;解决办法: 这个问题的产生原因比较多，常见的可能是： ...
vue 打包生成json 文件列表
05-18
在 Vue 中，打包生成的静态资源文件列表可以通过 webpack 的插件 `webpack-manifest-plugin` 来生成。 首先，在项目中安装 `webpack-manifest-plugin`： ```bash npm install --save-dev webpack-manifest-plugin ``` 然后，在 webpack 的配置文件中引入该插件，并配置输出的文件名： ```javascript const ManifestPlugin = require('webpack-manifest-plugin'); module.exports = { // ... plugins: [ new ManifestPlugin({ fileName: 'manifest.json', }), ], }; ``` 上述配置将在打包时生成一个名为 `manifest.json` 的文件，其中包含了所有打包生成的静态资源文件的信息。 如果你想要在 Vue 的模板中使用该文件列表，可以在 `index.html` 中通过 `script` 标签引入，然后在 Vue 实例中通过访问全局变量 `__webpack_manifest__` 来获取该文件列表。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My App</title> </head> <body> <div id="app"></div> <script src="/dist/js/app.js"></script> <script src="/dist/manifest.json"></script> <script> var app = new Vue({ el: '#app', data: { manifest: __webpack_manifest__, }, }); </script> </body> </html> ``` 现在，你就可以在 Vue 实例中访问 `manifest` 对象来获取打包生成的静态资源文件列表了。例如，你可以遍历该列表，生成一组 `script` 或 `link` 标签来自动加载这些文件： ```html <div id="app"> <script v-for="file in manifest"> document.write('<script src="' + file.path + '"><\/script>'); </script> </div> ```
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值