Vue项目如何设置多个静态文件;如何自定义静态文件目录

Vite实现方案

安装插件

javascript 复制代码
npm i vite-plugin-static-copy

在vite.config.ts引入

javascript 复制代码
import { viteStaticCopy } from 'vite-plugin-static-copy'

配置

javascript 复制代码
    plugins: [
        viteStaticCopy({
            targets: [
                {
                    src: "要设置的静态文件目录的相对路径 相对于vite.config.ts的", 
                    dest: './', // 不用动
                },
            ],
        }),
    ],

打包尝试

Webpack实现方案

使用 插件

javascript 复制代码
npm i copy-webpack-plugin

vue.config.js 引入

javascript 复制代码
const CopyWebpackPlugin = require('copy-webpack-plugin'); 


  configureWebpack: { 
    plugins: [ 
      new CopyWebpackPlugin({patterns:[
        {
          from: path.resolve(__dirname, '../static'), // 要复制的文件夹
          to: path.resolve(__dirname, 'dist/'),   // 目标文件夹
        }, 
      ]}),
    ],
  },
相关推荐
染指11103 小时前
103.RAG-LLamaIndex后端rag问答-聊天接口
前端·javascript·vue.js·人工智能
单线程_0111 小时前
从案例分析 Vue3 Tokenizer+Parser 源码三
前端·javascript·vue.js
jay神12 小时前
【计算机毕业设计】基于SpringBoot的程序教学辅助系统
java·前端·vue.js·spring boot·后端·毕业设计·课程设计
OpenTiny社区18 小时前
从流式消息到多会话:TinyRobot Kit 如何组织 AI 对话数据层
vue.js
卤蛋fg620 小时前
vue表格组件 vxe-table 鼠标滑动表头选择整列与选择整行的配置详解
vue.js
阳火锅21 小时前
老板要周报?我说不用,代码提交就是进度
前端·javascript·vue.js
简单Janeee1 天前
[Vue 3 从零到上线]-第九篇:更美更强——引入 UI 库与网络请求 (Axios)
网络·vue.js·ui
小蒜学长1 天前
基于SpringBoot + Vue的智能健身房管理系统的设计与实现(代码+数据库+LW)
java·数据库·vue.js·spring boot·后端
千里码aicood1 天前
Django+Vue 基于XGBoost与随机森林的沿海地区台风天气大数据预警系统实现
vue.js·随机森林·django
jay神1 天前
【计算机毕业设计】基于Flask+Vue的电影数据可视化与智能推荐系统
前端·vue.js·python·信息可视化·flask·毕业设计·课程设计