首页 >> js开发 >> JavaScript如何配置vue.config.js 处理static文件夹下的静态文件
JavaScript如何配置vue.config.js 处理static文件夹下的静态文件
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
最近开发过程中遇到个小需求,需要根据需求动态配置一些静态数据,但我不想直接把这个静态文件引入进来,build时就会把数据打包到js文件中,造成js文件很大;呃呃。。。。(ps:就想给自己找点别扭)
回头看一下项目,果断的在根目录下创建一个static/test.json文件,在目标页面下fetch获取这个json文件里的数据:
fetch("../static/test.json")
.then(res => res.json())
.then(res => {
//获取到了数据
})
.catch(err=>{
//解析错误或者获取数据失败
})
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
copy-webpack-plugin安装完成后在vue.config.js 文件配置一下吧
//引入
const CopyWebpackPlugin = require("copy-webpack-plugin") //引入插件
module.exports = {
configureWebpack: {
plugins: [
new CopyWebpackPlugin({
patterns:[{
from: "./static",
to: 'static'
}]
})
]
}
}
//引入
const CopyWebpackPlugin = require("copy-webpack-plugin") //引入插件
module.exports = {
configureWebpack: {
plugins: [
new CopyWebpackPlugin({
patterns:[{
from: "./static",
to: 'static'
}]
})
]
}
}
ok,就这么简单,完活了运行起来看看效果(还是灰常自信):以上就是遇到这个问题整个解决的思路啦;
回头看一下项目,果断的在根目录下创建一个static/test.json文件,在目标页面下fetch获取这个json文件里的数据:
fetch("../static/test.json")
.then(res => res.json())
.then(res => {
//获取到了数据
})
.catch(err=>{
//解析错误或者获取数据失败
})
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
copy-webpack-plugin安装完成后在vue.config.js 文件配置一下吧
//引入
const CopyWebpackPlugin = require("copy-webpack-plugin") //引入插件
module.exports = {
configureWebpack: {
plugins: [
new CopyWebpackPlugin({
patterns:[{
from: "./static",
to: 'static'
}]
})
]
}
}
//引入
const CopyWebpackPlugin = require("copy-webpack-plugin") //引入插件
module.exports = {
configureWebpack: {
plugins: [
new CopyWebpackPlugin({
patterns:[{
from: "./static",
to: 'static'
}]
})
]
}
}
ok,就这么简单,完活了运行起来看看效果(还是灰常自信):以上就是遇到这个问题整个解决的思路啦;
相关文章:
- jsJS实现audio音频剪裁剪切复制播放与上传(步骤详解)js大全
- js解决vue动态路由异步加载import组件,加载不到module的问题js大全
- js代码JavaScript 监听组合按键思路及代码实现
- JavaScriptvue.js 解决v-model让select默认选中不生效的问题
- jsvue中touch和click共存的解决方式js大全
- js解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题js大全
- js解决vue中的无限循环问题js大全
- jsvue 监听窗口变化对页面部分元素重新渲染操作js大全
- jsvue键盘事件点击事件加native操作js大全
- jsvue 遮罩层阻止默认滚动事件操作js大全