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/'),   // 目标文件夹
        }, 
      ]}),
    ],
  },
相关推荐
bo5210010 分钟前
突破性能瓶颈:基于虚拟滚动的大数据需求文档方案——告别卡顿与分页,实现Word级流畅体验
javascript·vue.js
小张快跑。17 分钟前
【Vue3】(三)vue3中的pinia状态管理、组件通信
前端·javascript·vue.js
一颗奇趣蛋25 分钟前
vue性能优化(响应数据&静态数据)
vue.js·性能优化
Hilaku34 分钟前
用好了 defineProps 才叫会用 Vue3,90% 的写法都错了
前端·javascript·vue.js
Dignity_呱43 分钟前
vue3对组件通信做了哪些升级?
前端·vue.js·面试
独立开阀者_FwtCoder1 小时前
最全301/302重定向指南:从SEO到实战,一篇就够了
前端·javascript·vue.js
TE-茶叶蛋13 小时前
Vue Fragment vs React Fragment
javascript·vue.js·react.js
Angindem13 小时前
从零搭建uniapp项目
前端·vue.js·uni-app
前端小白从0开始15 小时前
Vue3项目实现WPS文件预览和内容回填功能
前端·javascript·vue.js·html5·wps·文档回填·文档在线预览
難釋懷16 小时前
Vue解决开发环境 Ajax 跨域问题
前端·vue.js·ajax