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/'),   // 目标文件夹
        }, 
      ]}),
    ],
  },
相关推荐
鹏多多17 分钟前
使用imaskjs实现js表单输入卡号/日期/货币等掩码的教程
前端·javascript·vue.js
正在学习前端的---小方同学3 小时前
vue-easy-tree树状结构
前端·javascript·vue.js
毕业设计制作和分享5 小时前
springboot150基于springboot的贸易行业crm系统
java·vue.js·spring boot·后端·毕业设计·mybatis
前端开发爱好者11 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
欧阳呀11 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui
华仔啊14 小时前
用 Vue3 + Canvas 做了个超实用的水印工具,同事都在抢着用
前端·vue.js·canvas
炒毛豆15 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
岁月宁静16 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
Dolphin_海豚16 小时前
@vue/reactivity
前端·vue.js·面试
菜狗的小小笔记_17 小时前
Vue3 实用技巧
vue.js