webpack打包后访问不到json文件

一、问题描述

在vue中,前端写ajax假数据,用axios将json数据渲染到组件中,开发期间一切正常,webpack打包压缩后,json文件的路径错误,页面访问不到数据,导致渲染失败。

二、预期结果

能正常获取数据,渲染页面。

三、问题分析

因为webpack没有把json文件打包到dist目录,所以not found,即便加了json-loader也无用。

四、解决方案

手动把ajax数据目录拷贝到dist目录,先让页面完整出来。通常ajax数据是后端给前端一个接口地址,前端去访问的,所以这里,前端不必想着打包json文件,还弄什么压缩,name哈希。

时间: 2024-11-09 15:25:09

webpack打包后访问不到json文件的相关文章

性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具)

查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大, 剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer(可视化视图查看器)== == 介绍1:webpack-bundle-analyzer(可视化)== 将捆绑内容表示为方便的交互式可缩放树形图 如下效果图: 模块功能: 意识到你的文件打包压缩后中真正的内容 找出哪些模块组成最大的大小 找到错误的模块 优化它! 最好的事情是它支持缩小捆绑!它解析它们以获得实际大小的

vue项目打包部署-----解决打包后访问资源失败问题

vue项目打包部署-----解决打包后访问资源失败问题. 本文链接:https://blog.csdn.net/kaola_l/article/details/80497490 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了解决js找

webpack打包后bundle.js文件过大的问题

由于webpack将所有的文件合并到一个js文件.因此打包后的文件过大,导致网络请求不畅. 今天尝试了一下webpack打包.结果打出来3.6M.因为之前在本地测试的原因,一直用的webpack -w的命令. 即监控入口文件有无改动,若有改动,则自动编译. 更改命令:webpack -p -w webpack -p起到压缩的作用. 结果为1.4M. 查阅了一下相关资料.果断用nginx进行gzip压缩. 进入 /usr/local/etc/nginx目录下 打开编辑nginx.conf 配置如下

webpack打包后iconfont文件路径问题解决

在使用vue-cli创建vue项目时,可以自动生成webpack文件.使用 npm run build 即可打包发布生产文件,打包后的文件 可以看到使用url-loader处理后的文件是在static目录下生成fonts目录下的文件.全部样式文件打包在css目录下app.hash.css文件中. 但我们会发现发布后,会存在字体文件找不到的问题,查看css文件发现是iconfont字体文件的路径引用问题. 解决方法: 在build/utils文件中的下图所示位置添加../../公共路径 这样打包的

简要分析webpack打包后代码

原文地址:https://www.jianshu.com/p/0e5247f9975f 1.打包单一模块 webpack.config.js module.exports = { entry:"./chunk1.js", output: { path: __dirname + '/dist', filename: '[name].js' }, }; chunk1.js var chunk1=1; exports.chunk1=chunk1; 打包后,main.js(webpack生成的

webpack打包后不能调用,改用uglifyjs打包压缩

背景: 项目基于原生js,没用到任何脚手架和框架,但也需要打包压缩. 项目的js中声明了一些全局变量 供其他js调用. 这时候如果用webpack打包,基于webpack特性,会嵌套一层大函数,会将js中的变量变成局部,不能供其他js调用. 因此弃用了webpack.选用了uglifyjs. 原因: webpack里也有用到uglifyjs的webpack版:uglifyjs-webpack-plugin. 打包途径: 打包源文件:dev文件夹下的js文件====>目标文件:js文件夹. 目录结

解决vue-cli webpack打包后加载资源的路径问题

vue项目,访问打包后的项目,输入路径后,页面加载空白.这时会有两类问题,都是路径问题. 1.一个是css,js,ico等文件加载不到,是目录里少了dist 打开页面时一片空白 解决办法: 前端精品教程:百度网盘下载 config/index.js文件的build->assetsPublicPath的默认值改为 './' assetsPublicPath:资源的根目录.这个是通过http服务器运行的url路径.因为webapp和static中间还有层dist,所以要用'./' 2.另一个就是单纯

VS2013利用ajax访问不了json文件——VS2013配置webconfig识别json文件

这两天用VS2013开发工具来访问json文件,老是报404文件,我根据网上来设置IIS添加MIME重启IIS和VS2013还是失败,无法访问json文件,但是奇怪的是可以访问txt文件 查询了很多方法,后来这种在VS2013中修改Web.config的方式奏效,特此记录一下: <system.webServer> <staticContent> <mimeMap fileExtension=".json" mimeType="applicati

webpack: 简单分析 webpack 打包后的代码

编译后代码 /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module