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/'),   // 目标文件夹
        }, 
      ]}),
    ],
  },
相关推荐
代码煮茶4 小时前
Vite 5.0 新特性深度解析:更快、更干净、更未来的前端构建利器
vue.js
Pu_Nine_98 小时前
IntersectionObserver 详解:封装 Vue 指令实现图片懒加载
前端·javascript·vue.js·性能优化
前端那点事8 小时前
Vue nextTick 超全解析|作用、使用场景、底层原理、Vue2/Vue3区别
前端·vue.js
前端那点事8 小时前
Vue面试高频:子组件能直接修改父组件数据吗?单向数据流原理+正确写法全覆盖
前端·vue.js
前端那点事8 小时前
为什么 Vue 的 template 标签不能用 v-show?底层机制+踩坑复盘+生产级解决方案
前端·vue.js
北风toto10 小时前
为什么 IntelliJ IDEA Community 无法开发 Vue?——附解决方案
java·vue.js·intellij-idea
跟着珅聪学java10 小时前
Element UI 的 Tabs 标签页开发教程
javascript·vue.js·elementui
jiayong2311 小时前
前端面试题库 - Vue框架篇
前端·vue.js·面试
三*一11 小时前
Mapbox GL JS 前端多边形分割实战:从踩坑到优雅实现
开发语言·前端·javascript·vue.js
xChive12 小时前
前端请求取消:用 AbortController 从 fetch 到 axios
前端·vue.js·axios·fetch·abortcontroller