如何配置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中处理时间戳为日期格式的方法
Jan 02 Javascript
JS的数组迭代方法
Feb 05 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
小程序实现多个选项卡切换
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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
33道php常见面试题及答案
2015/07/06 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
js中style.display=""无效的解决方法
2014/10/30 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
Python 字符串大小写转换的简单实例
2017/01/21 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
Python批量启动多线程代码实例
2020/02/18 Python
关于Python解包知识点总结
2020/05/05 Python
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
护理自荐信
2013/10/22 职场文书
产品包装策划方案
2014/05/18 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python