如何配置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 相关文章推荐
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 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
杏林同学录(七)
2006/10/09 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
python3.0 字典key排序
2008/12/24 Python
python中list列表的高级函数
2016/05/17 Python
django 创建过滤器的实例详解
2017/08/14 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
浅谈Python中的字符串
2020/06/10 Python
python Xpath语法的使用
2020/11/26 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
50道外企软件测试面试题
2014/08/18 面试题
连锁经营管理专业大学生求职信
2013/10/30 职场文书
入党积极分子思想汇报范文
2014/01/05 职场文书
公司开业庆典主持词
2014/03/21 职场文书
个人借款担保书
2014/04/02 职场文书
公证书标准格式
2014/04/10 职场文书
社会工作专业自荐信
2014/09/26 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
班主任开场白
2015/06/01 职场文书
开场白怎么写
2015/06/01 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
python中对列表的删除和添加方法详解
2022/02/24 Python
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS