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/'),   // 目标文件夹
        }, 
      ]}),
    ],
  },
相关推荐
妙码生花19 小时前
让各大 AI 整理出来的前端工程命名最简实践(Vue + TS)
前端·javascript·vue.js
用户8417948145621 小时前
vxe-table 实现编辑列的权限控制:列级与表级权限管理
vue.js
Tian_Hang21 小时前
Vue3 父子组件通讯
前端·javascript·vue.js
C++、Java和Python的菜鸟1 天前
第13章 前端Web实战(Tlias案例)
前端·javascript·vue.js
qq83443101 天前
Luckysheet,在Vue 等框架中初始化失败(白屏),如何修复
前端·javascript·vue.js
满栀5852 天前
Vue.js 接口封装最佳实践:从基础到高级
前端·javascript·vue.js
java1234_小锋2 天前
Vue3专题 - 事件处理
javascript·vue.js
宿6742 天前
vue3-DOM树
前端·javascript·vue.js
宿6742 天前
tsconfig.node.json
前端·javascript·vue.js
lllsure2 天前
Vue&React Router
前端·vue.js·react.js