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/'),   // 目标文件夹
        }, 
      ]}),
    ],
  },
相关推荐
生命猿于运动1 分钟前
Trae使用体验
前端·javascript·vue.js
G扇子2 分钟前
Vue2与Vue3的双向数据绑定原理与实现对比
前端·vue.js
樊小肆12 分钟前
Vue3 在线 PDF 编辑 2.0 图片批注、批注清空与批注记录功能解析
前端·vue.js·开源
Web漫游29 分钟前
🔥2025年了你还不会使用Vue3?
javascript·vue.js
天狗精灵38 分钟前
从节点重排看React 与 Vue3 的 Diff 算法
前端·vue.js·react.js
前端大白话41 分钟前
Vue中provide/inject与Vuex数据共享大比拼:一文教你选对方案
前端·javascript·vue.js
fury_12344 分钟前
删除elementplus的li标签中的一个class属性?
前端·javascript·vue.js
拖孩1 小时前
【Nova UI】十二、打造组件库之按钮组件(上):迈向功能构建的关键一步
前端·javascript·vue.js
来自星星的坤9 小时前
Vue 3中如何封装API请求:提升开发效率的最佳实践
前端·javascript·vue.js
程序猿熊跃晖11 小时前
Vue中如何优雅地处理 `<el-dialog>` 的关闭事件
前端·javascript·vue.js