如何配置vue.config.js 处理static文件夹下的静态文件


Posted in Javascript onJune 19, 2020

最近开发过程中遇到个小需求,需要根据需求动态配置一些静态数据,但我不想直接把这个静态文件引入进来,build时就会把数据打包到js文件中,造成js文件很大;呃呃。。。。(ps:就想给自己找点别扭)
回头看一下项目,果断的在根目录下创建一个static/test.json文件,在目标页面下fetch获取这个json文件里的数据:

fetch("../static/test.json")
.then(res => res.json())
.then(res => {
//获取到了数据
})
.catch(err=>{
//解析错误或者获取数据失败
})

ok,就这么简单,完活了运行起来看看效果(灰常自信);

如何配置vue.config.js 处理static文件夹下的静态文件

结果现实给了我一记记大嘴巴子;
他居然走了catch error,打开浏览器查看一下

如何配置vue.config.js 处理static文件夹下的静态文件

结果状态是200,fetch请求没有什么问题,那就可能是json文件路径有问题,它不想让我找到,居然和我躲猫猫;我这小脾气怎么能忍,结果又一个 2000 years later。。。。

我发现在我build完后,打包好的项目中没有test.json文件,因为我用的是vue-cli 3.x 构建的项目,在不引用的情况下,不会把这个静态文件打包带走的,所以 真想只有一个,不是人家在躲猫猫,是我根本就没带人家玩。

so 正文终于来了(对不起,前戏有点多):

我想把static下所有的静态文件原封不动打包带走,我想到了

copy-webpack-plugin

安装完成后在vue.config.js 文件配置一下吧

//引入
const CopyWebpackPlugin = require("copy-webpack-plugin") //引入插件

module.exports = {
  
  configureWebpack: {
    plugins: [
     new CopyWebpackPlugin({
      patterns:[{
       from: "./static",
       to: 'static'
      }]
     })
    ]
 }
}

ok,就这么简单,完活了运行起来看看效果(还是灰常自信):

如何配置vue.config.js 处理static文件夹下的静态文件

以上就是遇到这个问题整个解决的思路啦;

到此这篇关于如何配置vue.config.js 处理static文件夹下的静态文件的文章就介绍到这了,更多相关vue.config.js处理静态文件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 日期常用的方法
Nov 11 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
js实现网页随机验证码
Oct 19 Javascript
Vue实现购物车基本功能
Nov 08 Javascript
小程序实现多个选项卡切换
Jun 19 #Javascript
微信小程序 button样式设置为图片的方法
Jun 19 #Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 #Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 #Javascript
深入解读VUE中的异步渲染的实现
Jun 19 #Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 #Javascript
微信小程序收藏功能的实现代码
Jun 19 #Javascript
You might like
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
应届毕业生求职信范例分享
2013/12/17 职场文书
车间统计员岗位职责
2014/01/05 职场文书
违反交通法规检讨书
2014/09/10 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
2014年节能工作总结
2014/12/18 职场文书
小班上学期个人总结
2015/02/12 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
高中运动会广播稿
2015/08/19 职场文书
大学生党课心得体会
2016/01/07 职场文书
教师外出学习心得体会
2016/01/18 职场文书
SpringBoot快速入门详解
2021/07/21 Java/Android