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/'),   // 目标文件夹
        }, 
      ]}),
    ],
  },
相关推荐
如果超人不会飞7 分钟前
TinyRobot SuggestionPopover智能建议弹出框组件
前端·vue.js
zhedream1 小时前
从模糊到清晰:一次组件重构里的开发哲学
vue.js
如果超人不会飞1 小时前
TinyRobot AI 对话组件库全组件使用指南
前端·vue.js
如果超人不会飞2 小时前
Vue.js
vue.js
往事随风灬3 小时前
我被 Volta 的“智能”坑了一下午:pnpm 为何无视项目 Node 版本?
前端·vue.js
如果超人不会飞3 小时前
TinyVue Layout 组件完全指南:别再手写 float 和 flex 了,栅格早该这样用
vue.js
AI行业学习3 小时前
CC-Switch v3.16.1 官方下载 | 安装配置详细教程【2026.6.10】
java·开发语言·vue.js·python·mysql·eclipse·html
小二·4 小时前
Spring Boot 3 + Vue 3 全栈开发实战
vue.js·spring boot·后端