vuecli build 打包版本管理

最新推荐文章于 2025-04-03 10:46:39 发布

Vincentzyc

最新推荐文章于 2025-04-03 10:46:39 发布

阅读量612

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zzzyyc/article/details/112970533

javascript 同时被 2 个专栏收录

19 篇文章

订阅专栏

vue

13 篇文章

订阅专栏

该博客介绍了如何配置`package.json`和`vue.config.js`以实现通过`npm run build`命令自动打包Vue项目，并在打包过程中删除指定版本的旧静态资源。`package.json`中定义了版本信息，`vue.config.js`中引入了`fs`和`rimraf`库来实现文件清理。在Webpack配置中添加了一个插件，在构建完成后删除`dist`目录下特定版本的文件夹，确保每次打包只保留最新两个版本的资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

package.json

  ...
  "version": "1.3.0",
  "lastVersion": "1.2.0",
  "lastTwoVersion": "1.1.0",
  ...

vue.config.js

const fs = require('fs')
const rimraf = require('rimraf')

module.exports = {
  publicPath: "./",
  outputDir: "dist",
  assetsDir: 'static' + process.env.npm_package_version,
  productionSourceMap: false,
  configureWebpack: config => {
    config.plugins.push({
      apply: compiler => {
        compiler.hooks.done.tap('MyPlugin', options => {
          rimraf('./dist/static' + process.env.npm_package_lastTwoVersion, function (err) {
            if (err) console.log(err)
            console.log(`----删除文件夹static${process.env.npm_package_lastTwoVersion}----`);
            fs.readdir('./dist', (err, files) => {
              if (err) console.log('----读取dist文件夹出错----', err)
              console.log(`----dist文件夹${files}----`);
            })
          })
          return options
        })
      }
    })
  },
  chainWebpack: config => {
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
  },
  devServer: {
    port: 3000,
    proxy: 'xxx'
  }
}

使用

npm run build 正常打包即可