vue前端项目中添加独立的静态资源

news2024/11/30 14:40:18

如果想要在vue项目中放一些独立的静态资源,比如html文件或者用于下载的业务模板或其他文件等,需要在vue打包的时候指定一下静态资源的位置和打包后的目标位置。
使用的是 copy-webpack-plugin 插件,如果没有安装则需要先安装一下,到项目的根目录下执行:
npm install --save-dev copy-webpack-plugin

然后修改 vuew.config.js:
const CopyPlugin = require("copy-webpack-plugin")
module.exports = {
    configureWebpack:{
          plugins: [
            new CopyPlugin([
              {
                from: "static_files",
                to: "static_files"

              },
            ]),
          ]
        },
}

例如:我的vuew.config.js修改后内容为如下:

const CopyPlugin = require("copy-webpack-plugin")

module.exports = {
    // 部署生产环境和开发环境下的URL。
    // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
    // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。
    // publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
    // // 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist)
    // outputDir: 'dist',
    // // 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
    // assetsDir: 'static',
    // // 是否开启eslint保存检测,有效值:ture | false | 'error'
    // lintOnSave: process.env.NODE_ENV === 'development',
    // // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
    // productionSourceMap: false,
    // webpack-dev-server 相关配置
    devServer: {
      port: 8080,
      open: true,
      // 是否在这个端口下开启热更新
      hot:true,
      //后端服务使用代理
      proxy: {
        // detail: https://cli.vuejs.org/config/#devserver-proxy
        [process.env.VUE_APP_BASE_API]: {
          target: `http://localhost:5000`,
          changeOrigin: true,
          pathRewrite: {
            ['^' + process.env.VUE_APP_BASE_API]: ''
          }
        }
      },
      disableHostCheck: true
    },
    configureWebpack:{
      plugins: [
        new CopyPlugin([
          {
            from: "static_files",
            to: "static_files"
          },
        ]),
      ]
    },

  }
  
  前端代码根目录下创建静态资源目录(我创建的是:static_files)和src目录并列,把我需要的静态目录和文件拷贝到这个 static_files 目录下,打包的时候就会打包进去了。


  

  前端代码根目录下创建静态资源目录(我创建的是:static_files)和src目录并列,把我需要的静态目录和文件拷贝到这个 static_files 目录下,打包的时候就会打包进去了。
  前端代码访问静态文件时,就可以直接 href 或 src 引用了:  
  <el-link href="/static_files/template/t01.xlsx" type="success" target="_blank">下载模板</el-link>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1051798.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Pikachu靶场——PHP反序列化漏洞

文章目录 1. PHP反序列化1.1 反序列化代码审计1.2 漏洞防御 1. PHP反序列化 可参考我写的另一篇博客&#xff1a;反序列化漏洞及漏洞复现。 序列化serialize() 序列化说通俗点就是把一个对象变成可以传输的字符串&#xff0c;比如下面是一个对象&#xff1a; class S{publi…

Push rejected: Push to origin/master was rejected

Push rejected: Push to origin/master was rejected 原因&#xff1a;推拒绝&#xff1a;推送到起源/主人被拒绝 解决方案如下&#xff1a; 方案1&#xff1a; 1.在Idea打开终端 方案2&#xff1a; 1、在对应项目文件里打开 Git Bash 然后依次输入&#xff1a; git pull …

【数据结构--八大排序】之堆排序

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

Databend 开源周报第112期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 理解用户自定义…

【GDB】使用 GDB 自动画红黑树

阅读本文前需要的基础知识 用 python 扩展 gdb python 绘制 graphviz 使用 GDB 画红黑树 前面几节中介绍了 gdb 的 python 扩展&#xff0c;参考 用 python 扩展 gdb 并且 python 有 graphviz 模块&#xff0c;那么可以用 gdb 调用 python&#xff0c;在 python 中使用 grap…

MathType7.4最新版本下载安装教程来咯!

MathType是全球领先的所见即所得公式编辑器&#xff0c;支持书写任何类型的数学方程式。 MathType曾作为Microsoft Word内置公式编辑器&#xff0c;与微软办公套件完美兼容&#xff0c;支持WPS&#xff0c;亦可以独立单机软件使用。是为数学理工经济学习研究、学术发表的有力拍…

echarts使用custom类型绘制矩形

echarts中根据坐标点和点的宽高绘制不同大小的矩形 效果图 <template><div style"height: 100%; width: 100%"><BaseChart emitChart"emitChart" :option"option1" /></div> </template><script> export …

基于Web的在线学习平台设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…

lwIP 开发指南(中)

目录 ARP 协议ARP 协议的简介ARP 协议的工作流程(获取目标设备 MAC 地址步骤)ARP 缓存表的超时处理 APR 报文的报文结构ARP 协议层的接收与发送原理解析发送ARP 请求数据包接收ARP 应答数据包 IP 协议IP 协议的简介IP 数据报IP 数据报结构IP 数据报的分片解析IP 数据报的分片重…

微信小程序学习笔记3.0

第3章 资讯类:仿今日头条微信小程序 3.1 需求描述及交互分析 需求描述 仿今日头条微信小程序,要具有以下功能。 (1)首页新闻频道框架设计,包括底部标签导航设计、新闻检索框设计及新闻频道滑动效果设计。 (2)首页新闻内容设计,包括新闻标题、新闻图片及新闻评论设计…

深度学习笔记之优化算法(二)随机梯度下降

深度学习笔记之优化算法——随机梯度下降 引言回顾&#xff1a;梯度下降法梯度下降法在机器学习中的问题随机梯度下降随机梯度下降方法的思想随机梯度下降方法的步骤描述关于学习率 引言 本节将介绍随机梯度下降 (Stochastic Gradient Descent,SGD) \text{(Stochastic Gradien…

102.二叉树的层序遍历

目录 一、题目 二、代码 一、题目 102. 二叉树的层序遍历 - 力扣&#xff08;LeetCode&#xff09; 二、代码 主要应用到了两个队列&#xff0c;一个队列存放数据&#xff0c;一个队列存放对应所在的第几层 /*** Definition for a binary tree node.* struct TreeNode {* …

机器学习笔记 - 基于强化学习的贪吃蛇玩游戏

一、关于深度强化学习 如果不了解深度强化学习的一般流程的可以考虑看一下下面的链接。因为这里的示例因为在PyTorch 之上实现深度强化学习算法。 机器学习笔记 - Deep Q-Learning算法概览深度Q学习是一种强化学习算法,它使用深度神经网络来逼近Q函数,用于确定在给定状态下采…

[watevrCTF-2019]Cookie Store

很简单一道 提示了很多在cookie中 我们去看看cookie 发现是base64加密 修改大于100即可 然后买即可 。。。。。。

【ARMv8 SIMD和浮点指令编程】NEON 加载指令——如何将数据从内存搬到寄存器(其它指令)?

除了基础的 LDx 指令,还有 LDP、LDR 这些指令,我们也需要关注。 1 LDNP (SIMD&FP) 加载 SIMD&FP 寄存器对,带有非临时提示。该指令从内存加载一对 SIMD&FP 寄存器,向内存系统发出访问是非临时的提示。用于加载的地址是根据基址寄存器值和可选的立即偏移量计算…

建筑能源管理(2)——建筑能源的类型及统计计算方法

1、能源类型 能源也称能量资源或能源资源&#xff0c;是为人类的生产和生活提供各种能力和动力的物质资源&#xff0c;是国民经济的重要物质基础&#xff0c;也是未来国家命运的基础。能源的开发和有效利用程度以及人均消费量是生产技术和生活水平的重要标志。 2018年10月26日…

无线WIFI工业路由器可用于楼宇自动化

钡铼4G工业路由器支持BACnet MS/TP协议。BACnet MS/TP协议是一种用于工业自动化的开放式通信协议&#xff0c;被广泛应用于楼宇自动化、照明控制、能源管理等领域。通过钡铼4G工业路由器的支持&#xff0c;可以使设备间实现高速、可靠的数据传输&#xff0c;提高自动化水平。 钡…

Learning Invariant Representation for Unsupervised Image Restoration

Learning Invariant Representation for Unsupervised Image Restoration (Paper reading) Wenchao Du, Sichuan University, CVPR20, Cited:63, Code, Paper 1. 前言 近年来&#xff0c;跨域传输被应用于无监督图像恢复任务中。但是&#xff0c;直接应用已有的框架&#xf…

Android 性能优化—— 启动优化提升60%

应用启动速度 一个应用App的启动速度能够影响用户的首次体验&#xff0c;启动速度较慢(感官上)的应用可能导致用户再次开启App的意图下降&#xff0c;或者卸载放弃该应用程序 本文将从两个方向优化应用的启动速度 : 1.视觉体验优化 2.代码逻辑优化 视觉优化 应用程序启动有…

Spring Framework 学习笔记4:AOP

Spring Framework 学习笔记4&#xff1a;AOP 1.概念 AOP&#xff08;Aspect Oriented Programming&#xff0c;面向切面编程&#xff09;是一种编程思想。它要解决的问题是&#xff1a;如何在不改变代码的情况下增强代码的功能。 AOP 有一些核心概念&#xff1a; 连接点&am…