vue读取静态html,在vue项目中,如何在js文件中获取静态文件?

7ce6ca653f690ede4816289840bc0dcb.png

我想在 js 中获取一个静态文件,使用上面的写法我获取不到。

我尝试了很多路径书写方式,试过绝对路径,相对路径,@ 等,但是,都不行,我的 loadJSON() 是在同级目录下的一个文件中的方法,其代码为

function loadJSON(filename, callback) {

var xobj = new XMLHttpRequest();

xobj.overrideMimeType("application/json");

xobj.open('GET', filename, true);

xobj.onreadystatechange = function () {

if (xobj.readyState == 4 && xobj.status == "200") {

callback(xobj.responseText);

}

};

xobj.send(null);

}

并且,在上面代码中 response 的内容为

traditionalchina

回答

‘@/assets/….’

路径没写对

../../../../asset/

使用require,并且是相对路径

0103689bd3c152f4fee33e234ade2c16.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue读取JSON文件的内容,可以按照以下步骤进行操作: 1. 创建一个名为data.json的JSON文件,并将其保存在项目目录下的static文件。 2. 在Vue组件导入JSON文件。可以使用import语句将文件导入为一个变量,例如: ```javascript import data from '@/static/data.json' ``` 这里的`@`是别名,表示项目根目录。将导入的JSON文件赋值给一个变量(例如`data`)供组件使用。 3. 在Vue组件的data选项使用导入的JSON数据: ```javascript export default { data() { return { jsonData: data } } } ``` 这样,`jsonData`变量就可以在组件使用了。 4. 在模板使用`jsonData`变量JSON数据。例如,可以使用`v-for`指令遍历JSON数组,并将数据渲染到模板: ```html <template> <div> <p v-for="item in jsonData">{{ item }}</p> </div> </template> ``` 这样,每个JSON数组的项都会被渲染为一个`<p>`标签,并显示在模板。 需要注意的是,读取本地JSON文件时需要在开发环境下运行,因为静态文件只能在开发服务器访问。 以上就是Vue读取JSON文件内容的方法。希望对您有所帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue 项目如何读取本地json文件数据](https://blog.csdn.net/2301_76433421/article/details/128943220)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Vue加载json文件的方法简单示例](https://download.csdn.net/download/weixin_38746701/12947080)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [VUE获取json里的数据](https://blog.csdn.net/weixin_61686632/article/details/125371363)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值