Vue 3 Vite 项目打包优化:自动删除指定文件的方法

程序员必备宝典https://tmxkj.top/#/ 在 Vue 3 项目中,如果你需要在打包之前删除指定的文件,可以使用 Node.js 的 fs 模块来实现。这可以通过在 vue.config.js 文件中配置一个自定义的 Webpack 插件来完成。

1.安装必要的依赖(如果还没有安装):

复制代码
npm install --save-dev fs-extra

2.创建或编辑 vue.config.js 文件

复制代码
const { defineConfig } = require('@vue/cli-service');
const fs = require('fs-extra');
const path = require('path');

module.exports = defineConfig({
  configureWebpack: config => {
    // 添加一个自定义插件来删除指定文件
    config.plugins.push({
      apply: (compiler) => {
        compiler.hooks.beforeRun.tapPromise('RemoveFilePlugin', async () => {
          const filePath = path.resolve(__dirname, 'path/to/your/file.txt'); // 替换为你要删除的文件路径
          try {
            await fs.remove(filePath);
            console.log(`Successfully removed file: ${filePath}`);
          } catch (err) {
            console.error(`Error removing file: ${filePath}`, err);
          }
        });
      }
    });
  }
});

3.如果需要获取到 package.json 里面的相关信息,例如获取version 版本号

复制代码
        const packageJsonPath = path.resolve(__dirname, 'package.json');
        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
        version.value = packageJson.version;
相关推荐
安全系统学习10 分钟前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖26 分钟前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖38 分钟前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水1 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐1 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06271 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台1 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121381 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack2 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python