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

2024-08-09 08:18:10

最近开发过程中遇到个小需求，需要根据需求动态配置一些静态数据，但我不想直接把这个静态文件引入进来，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，就这么简单，完活了运行起来看看效果（还是灰常自信）：

以上就是遇到这个问题整个解决的思路啦；

到此这篇关于如何配置vue.config.js 处理static文件夹下的静态文件的文章就介绍到这了,更多相关vue.config.js处理静态文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue CLI4 Vue.config.js标准配置(最全注释)

前言: Vue.js CLI工具不知不觉发展到了4.0时代,CLI给人最直白的感受是没有了build文件夹跟config文件夹,所有的配置都在Vue.config.js完成.那么该文件的配置至关重要.现在我们来看一下最新配置是怎么配置的. 安装 npm i -d vue-cli-configjs // vue.config.js const path = require('path'); const CompressionWebpackPlugin = require("compression
vue.config.js中配置Vue的路径别名的方法

在官方的vue-cli配置参考中存在一个configureWebpack webpack中有一个配置路径别名的属性 const path = require('path') module.exports = { // 对象和函数都可以,如果要控制开发环境可以选择函数 configureWebpack:{ resolve:{ alias:{ 'assets':path.resolve('./src/assets') } } } 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我
vue-cli3中vue.config.js配置教程详解

前言 vue-cli3推崇零配置,其图形化项目管理也很高大上. 但是vue-cli3推崇零配置的话,导致了跟之前vue-cli2的配置方式都不一样了. 别名设置,sourcemap控制,输入文件位置和输出文件位置和输出的方式,压缩js控制,打包webapck日志分析,externals忽略配置(外部引入),调试的端口配置,proxy接口配置等等的. 有时候还需要我们配置的,因为官方推荐的,并不适用于我们平时的开发所用的. 所以,我的vue.config.js配置是下面这样的.还有一个改hash的
详解如何配置vue-cli3.0的vue.config.js

本文介绍了如何配置vue-cli3.0的vue.config.js,分享给大家,具体如下: vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构,3 的设计更加抽象和简洁(此处后续可以详细介绍) vue
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法

使用自己基于vue-cli 2.X改造的前端多页脚手架有近1年多时间了,一直没机会升级3.0版本开始零零碎碎开始写一些功能,顺便分享一下 const path = require('path') const glob = require('glob') /** 获取多页的入口脚本和模板 */ const getPages = (() => { const [ globPathHtml, globPathJs, pages, tempSet ] = [ ['./src/modules/**/in
vue - vue.config.js中devServer配置方式

前言这里写你调用接口的基础路径,来解决跨域,如果设置了代理,那你本地开发环境的axios的baseUrl要写为'',即空字符串只有一个接口ip端口时 devServer: { open: false, // 跨域 proxy: { '/nuojinadm/': { target: 'http://192.168.0.11/', changeOrigin: true } } } 2.设置axios中的baseUrl 与proxy端口一致 baseUrl: { dev: '/nuojinadm/
Vue-cli3项目配置Vue.config.js实战记录

Vue-cli3 搭建的项目界面想对之前较为简洁之前的build和config文件夹不见了,那么应该如何配置如webpack等的配那只需要在项目的根目录下vue.config.js 文件(是根目录,不是src目录语法 module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build
vue.config.js常用配置详解

使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹. vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建一个vue.config.js文件进行配置 module.exports = { // 选项... } 基本路径 baseUrl从 Vue CLI 3.3 起已弃用使用publicPath来替代. 在开发环境下,如果想把开发服务器架设在根路径,可以使用一个条件式的值 module.exports =
如何配置vue.config.js 处理static文件夹下的静态文件

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

目录 vueCli4配置vue.config.js vueCli4配置文件路径别名及使用项目根目录下创建vue.config.js文件配置文件中写入一下代码别名的使用 vueCli4配置vue.config.js const path = require('path') const CompressionPlugin = require('compression-webpack-plugin') //cnpm install --save-dev compression-webpack-p
vuecli3.0脚手架搭建及不同的打包环境配置vue.config.js的详细过程

参考文档 https://cli.vuejs.org/zh/ 1.安装 npm install -g @vue/cli 2.检查安装 vue -V 3.创建项目 vue create project_name 出现下图信息 4.上图两种选择方式,第一种是默认的,第二种自己选择配置这里一般选择第二种自己配置,点击回车键后出现下图信息 5.在上图中选择你需要的模块,上下移动,空格进行确定,下图是测试选择的 6.选好后,敲Enter键,接着选择 7.选择完毕后,一路Enter,到下图 8.模板创建
node.js与C语言实现遍历文件夹下最大的文件，并输出路径，大小

node.js版遍历文件夹下最大的文件,并输出路径,大小实现代码: /* 遍历文件夹下最大的文件,并输出路径,大小 */ function findmax(basepath){ //只能执行一次 if(findmax.s) return; findmax.s = true; var fs = require('fs'); var maxfile = 0; var count = 0; var begin = new Date().getTime(); function Travers
java读取某个文件夹下的所有文件实例代码

java读取某个文件夹下的所有文件学习java基础知识,读取文件,读取某个文件夹,需要读取所有文件,如何实现呢,看下实例代码. 实例代码: import java.io.FileNotFoundException; import java.io.IOException; import java.io.File; public class ReadFile { public ReadFile() { } /** * 读取某个文件夹下的所有文件 */ public static
Android递归方式删除某文件夹下的所有文件(.mp3文件等等)

1.由于需要删除文件,因此需要如下权限: <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission> 2.核心代码复制代码代码如下: package com.example.deleteyoumi; import java.io.File; import android.os.Bundle; import android.os.Han
JAVA实现遍历文件夹下的所有文件(递归调用和非递归调用)

JAVA 遍历文件夹下的所有文件(递归调用和非递归调用) 1.不使用递归的方法调用. public void traverseFolder1(String path) { int fileNum = 0, folderNum = 0; File file = new File(path); if (file.exists()) { LinkedList<File> list = new LinkedList<File>(); File[] files = file.listFile
python引入其他文件夹下的py文件具体方法

红色方框要引入箭头里面的 import sys sys.path.append('../../config/') from database import * print(MYSQL_CONFIG) 内容扩展: Python的import包含文件功能就跟PHP的include类似,但更确切的说应该更像是PHP中的require,因为Python里的import只要目标不存在就报错程序无法往下执行.要包含目录里的文件,PHP中只需要给对路径就OK.Python中则不同 a.py 要 import
合并一个文件夹下多个文件内容的单行shell命令

合并一个文件夹下多个文件内容: 复制代码代码如下: find -name "*.log" -exec 'cat' {} \; > test.tmp
asp.net遍历文件夹下所有子文件夹并绑定到gridview上的方法

遍历文件夹下所有子文件夹,并且遍历配置文件某一节点中所有key,value并且绑定到GridView上 Helper app_Helper = new Helper(); DataSet ds = new DataSet(); DataTable dt = new DataTable(); protected void Page_Load(object sender, EventArgs e) { gvwBind(); } #region 绑定GridView /// <summary> //

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

相关推荐

随机推荐