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

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

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

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


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


结果状态是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,就这么简单,完活了运行起来看看效果(还是灰常自信):

完美~
以上就是遇到这个问题整个解决的思路啦;有哪些不足欢迎大神们指点;

原文链接:segmentfault.com

上一篇:从设计到开发,实现一个人人都可以简单使用及管理的工作流系统
下一篇:自学前端,达到什么水平能找工作?

相关推荐

  • 🙋Hanjst汉吉斯特改进+enSafeExpression安全表达式等

    Hanjst汉吉斯特模版语言及模版引擎,近期持续改进升级。 这次改进主要是增加了对安全输出表达式兼容,由于涉及到对软件开发过程中的效率和软件运行效率的平衡和取舍,所以多写了几句,以描述这个权衡利弊对...

    4 个月前
  • 🙋Hanjst汉吉斯特升级:+showImageAsync及性能改进等

    自2019年元旦🙋Hanjst汉吉斯特 模板语言及其编译引擎发布,已经过去一年多了。 这期间随着 🙋Hanjst汉吉斯特 的推广应用,我们也陆续发布了如下一些更新内容: 🛠️Hanjst/汉吉...

    5 个月前
  • 🙋Hanjst汉吉斯特优化+JsonDataFromScript等

    近日继续对 🙋Hanjst汉吉斯特优化改进。这次的改进思考是从服务器端返回的 HanjstJsonData的容器设计问题。目前的做法是服务器端的HanjstJsonData放入终端页面的一个Div元...

    4 个月前
  • 😉我用 Nuxt.js 仿了个掘金

    前言 首先肯定是要夸夸掘金啦,最开始从 CSDN 到 博客园 再到 掘金,个人感觉掘金的技术氛围非常的nice,真是个宝藏社区👏。技术文章大多以前端为主,对前端开发者非常友好,质量也是歪瑞古的。

    5 个月前
  • 😀一个原生js弹幕库

    danmujs 😀一个原生js弹幕库,基于 CSS3 Animation 地址、核心代码 本项目基于 rc-bullets,项目约70%的代码基于rc-bullets,首先要感谢这个项目的作者...

    8 个月前
  • 🕵️‍♀️由原型到JS中的“模拟类”

    讲述了有关 JavaScript 中原型相关知识,又引出了 JavaScript 中的**“类“**究竟是什么?,以及一系列相关问题。 一、前置知识 1、JavaScript 的面向对象(OOP) ​...

    6 个月前
  • 🔥《吊打面试官》系列 Node.js 必知必会必问!

    前言 codeing 应当是一生的事业,而不仅仅是 30 岁的青春🍚 本文已收录 Github,欢迎 Star,一起接水💧 作为一个在互联网公司面一次拿一次 Offer 的面霸,打败了无...

    6 个月前
  • 💖CSS + JS 送学妹满屏幕小爱心

    故事开始 午饭时间,暗恋已久的学妹拉着我的衣袖:“学长学长,你能不能让这些爱心变成五颜六色的吗~”。 我在旁边笑开了花~~~ 诶呀,口水流出来了。

    5 个月前
  • (干货👍)从详细操作js数组到浅析v8中array.js

    前言 最近在写面试编程题,经常用到数组,经常想偷个懒,用它提供的方法,奈何还是对数组方法使用不熟练,导致写了很多的垃圾代码,很多地方稍加修改的话肯定变得简洁高效优雅👊 所以✍这篇文章本着了解一下Ja...

    3 个月前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包安装,二到淘宝cpm镜像查看cpm镜像命令:npm install -g cnpm --registry=http...

    1 年前

官方社区

扫码加入 JavaScript 社区