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/'),   // 目标文件夹
        }, 
      ]}),
    ],
  },
相关推荐
ttod_qzstudio1 分钟前
DriveLerpControllerEditor开发总结:一个3D编辑器插值控制系统的实现
vue.js·typescript·编辑器·tdesign
咸鱼加辣8 分钟前
【前端框架】路由配置
javascript·vue.js·前端框架
San30.18 分钟前
从 0 到 1 打造 AI 冰球运动员:Coze 工作流与 Vue3 的深度实战
前端·vue.js·人工智能
安_23 分钟前
为什么 Vue 要用 npm run dev 启动
前端·vue.js·npm
六便士的理想25 分钟前
el-table实现滑窗列
前端·vue.js
武昌库里写JAVA26 分钟前
Java设计模式-(创建型)抽象工厂模式
java·vue.js·spring boot·后端·sql
Yaru1110 小时前
Vue 3.6 预览版特性
javascript·vue.js
来杯三花豆奶10 小时前
Vue 3.0 Mixins 详解:从基础到迁移的全面指南
前端·javascript·vue.js
dly_blog13 小时前
setup 函数完整指南!
前端·javascript·vue.js
写代码的jiang13 小时前
【无标题】实战:Vue3 + Element Plus 实现树形选择器全量预加载与层级控制
前端·javascript·vue.js