vue 中引入js文件json数据 在组件中使用 避免打包 详细教程

最新推荐文章于 2024-04-30 09:37:37 发布
最新推荐文章于 2024-04-30 09:37:37 发布
阅读量2.4k 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： VUE 文章标签： 打包 避免打包 不打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feifanzhuli/article/details/119190893
这篇教程详细介绍了如何在Vue项目中引入公共json文件，将数据存放在public目录下避免打包。通过在组件中直接引用该文件，实现了在不被打包的情况下使用外部数据。文中通过创建一个xmlList.js示例，展示了具体操作步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近在网上找了很多关于静态文件不打包和引入静态文件中数据不需要打包的需求。但是发现基本解释不是特别详细，所以花了点时间做了一个demo做演示。

vue中如果需要引入外部js文件，避免被打包我们可以放到 public 文件下：
在这里插入图片描述
在 public 下新建文件夹 json 中有 xmlList.js 文件
此时xmlList就不会被打包编译。

在组件中使用数据

在html文件中引入

<script src="json/xmlList.js"></script>

了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue中，使用以下方式引入json文件，打包后，删除修改alldata.json文件，页面数据不变，如何处理？
**My Coding Family**
01-14 650
🏆本文收录于专栏，主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家！持续更新中，up！up！up！！
Vue 不重新打包，动态加载全局配置的实现过程
本博客纯属个人网络笔记，如对阁下有用，甚喜；否则，关掉即可，不喜勿喷。专心写代码，不做键盘侠！
12-10 2562
Vue.js 如何通过全局静态文件实现配置的动态修改，而且不需要重新打包就能立即生效呢？本文记录这个问题的解决过程。
获取静态json文件 不被打包 可在服务器直接修改
FANSILVLV的博客
04-30 213
【代码】获取静态json文件 不被打包 可在服务器直接修改。
vue项目打包之后静态资源不显示问题及如何让webpack不打包某个静态资源(js,css,img)
qq_44701038的博客
04-01 4452
vue项目打包之后静态资源空白问题解决 webpack不打包特定的静态资源 vue项目中，static文件夹里面的资源不会被打包，所以我们可以将不需要被webpack打包的资源放在static中，然后在index.html中引用 我在static文件夹中，有一个名为baseURL.js的文件 在vue项目的index.html下引入baseURL.js baseURL.js文件的主要作用...
Vue项目引入本地JSON文件
qq_57671914的博客
11-21 4118
首先将JSON文件移动到assets目录下 通过import将其引入 最后直接引用即可
VUE配置外部请求接口，不用再每次打包部署
z_jing0927的博客
12-26 1658
vue 打包生成配置文件，方便外部修改公共路径，不用每次都进行打包部署
package.json中main，module，exports三种方式的使用，自定义入口文件index.js
05-07
在JavaScript的模块化开发中，`package.json` 文件起着至关重要的作用，它定义了项目的元数据，并指定了模块的入口文件。对于Vue.js项目，尤其是由`@vue/cli`生成的Vue3项目，`package.json`中的`main`、`module`和`...
自定义Vue组件打包、发布到npm及使用教程
10-16
知识点详细解析： 1. 自定义Vue组件的开发与打包 在开发Vue组件时，需要为每个组件...在安装之后，可以通过import语句在Vue项目中引入该组件，并利用其暴露的name属性来在项目中使用它，从而实现组件的复用和维护。
在Vue项目中引入JQuery-ui插件的讲解
10-17
JQuery-ui是基于JQuery的用户界面库，它包括日期选择器、滑块、进度条等许多组件，这些组件都是高度可定制的，可以直接嵌入到Vue项目中使用。 首先，安装JQuery-ui插件的方法是在项目的根目录下打开命令行，执行npm...
vue项目引入json数据！
followly的博客
10-25 2985
在项目中我们在引入自己写的json数据，可以通过json-server方法将json文件转化为一个端口号引入！但是使用该方法前需要导入node的一个模块！ json-server可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。 然后在json文件目录下，运行json-server --watch --port 3001 data.json指令 通过启动json-server服务并侦听data.json，.
《webpack5 实战一》之js/json打包
星宇大前端
04-08 1085
前言：项目一直在用webpack 打包，也系统的跟着B站的视频教程去学过，但是总是觉得差了点什么，有些配置还是不知道，决定覆盖一些例子写下来总结下知识点，顺便学习下webpack5。 webpack概念不多说了，请点击查看官方文档 首先，简单的打包默认的js和json的例子。 源码地址：https://github.com/RainManGO/webpack-demo   目标过程分解 目标：webpack打包js/json，html中验证结果 webpack 默认支持打包js/json .
每日记录 2016-4-28
weixin_33778778的博客
04-28 172
HTML5 一、Meta标签中的format-detection属性及其含义 意为：格式检测 或许你会有这样的经历：当你在制作手机端的页面中，点击了没有加任何链接的格式的数字时，这时手机会进行自动拔号提示操作！ 1、禁止自动拨号 <meta name="format-detection" content="telephone=no"> 2、禁止跳转邮箱 <meta ...
Vue中引入json数据（不用向后台发送请求）
童童童彤
10-10 697
把 json 数据放入一个 .js 文件中放在src文件下的assets中（一般情况下），例如叫data.js文件，用exports导出 module.exports = { 'tempData: [ {'name': 'LiMing'} ], } 最后在所需要引入 json 数据的 .vue 文件中引入 import data from '@/assets/data.js' // 引入 // 使用 created () { console.log(data) // 得到data
vue.config.js 全局配置
热门推荐
轻风细雨_林木木
03-20 3万+
1.Webpack配置实例 参考：https://cli.vuejs.org/zh/config/ vue.config.js vue.config.js 是一个可选的配置文件，如果项目中存在这个文件，那么它会被 @vue/cli-service 自动加载，你也可以使用 package.json 中的 vue 字段配置，但是package.json中需要严格遵照 JSON 的格式来写。 文件初始值： /** * @type {import('@vue/cli-service').ProjectOpti
vue3非打包直接用的配置
大赚万万亿
04-25 1528
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>演示例子</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.31/vue.global.prod.min.js"></script> </head> <body> &l.
vue3+vite本地json文件打包与读取时遇到的问题
m0_72072486的博客
04-19 1688
若是放在src文件夹下在打包的时候本地json文件打包不进去。推荐把本地json文件放在public文件夹中。本地json数据在vue3中可以直接读取。
如何实现vue项目读取配置文件，不重新打包
好记性不如烂笔头
01-14 7780
在项目开发时，经常遇到开发环境和生产环境因为某几个引用地址或是参数不一致，部署测式环境打个包，上线生产时又要重新出包，这样测试又会担心最后这此打包会不会出问题，到生产环境还有问题，为了解决这个问题，特将这些配置信息剥离出来，不在进行重新打包，只需要修改一个文件，vue打包好的项目直接读取配置文件内容就可以了。具体方法如下： 1、public下创建project.config.json pro...
基于vue-cli3.0及以上配置外部js文件打包dist文件夹，修改全局接口地址
m0_60397142的博客
09-28 1028
配置一个外部不参与打包文件，里面是请求接口地址相同的部分，可在打包完毕之后的dist文件上全局修改请求地址，无需手动一个一个修改，大大提高了开发的效率。 在vue-cli3.0以上，取消了原先的static文件夹（原来不参与webpack打包的文件），现在vue-cli3+的朋友，可把文件创建在public文件下，此目录里的文件不参与打包,接下来，就该去配置全局的接口地址。 首先，在public文件夹下新建一个config.js,把我们需要的全局地址写进去，这里我是直接在里面...
vue中import读取使用本地json数据打包后的访问问题
最新发布
06-05
用户反复提到在Vue项目中通过import语句引入本地JSON文件后，打包部署后访问不到最新数据的问题。这其实是一个典型的构建路径处理不当引发的静态资源管理问题。让我拆解一下技术要点：Vue的打包机制默认会将import...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值