乐趣区

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

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

退出移动版