vue-cli-version-static-plugin v2.2.4

VersionPlugin

• 为实现vuecli脚手架打包后，项目可以通过手动切换版本号来控制客户端具体展示页面，这在当前端页面出错，服务器上直接修改静态资源版本号来还原/回滚到之前代码。而不需要重新编译！
• 为解决vuecli项目中直接引用public中的static资源打包后无法正确展示的问题。

参数

使用方式

• 在vue.config.js中引入VersionPlugin

• 获取变量VersionPlugin,VersionCode,

• VersionPlugin 直接在configureWebpack中添加到插件中。 config.plugins.push(new VersionPlugin());

• VersionCode 赋值给 assetsDir，也可以在前面拼接自定义名称或文件夹名 assetsDir: VersionCode 或 'static/'+VersionCode

• 最后在public中的index.html模板文件中引入config文件

• 若htmlplugin中的option设置了cdn，则会对cdn中的所有绝对引用路径与js，css做相同处理。同时对绝对引用路径支持动态指定publicPath

不同环境配置

• 默认取当前NODE_ENV值 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build --report" },
• 指定配置文件名称 ,根目录下的config文件夹中需要存在local.js和test.js文件，若没有会自动建立 "scripts": { "local": "vue-cli-service serve --config local",
  "test": "vue-cli-service serve --config test" },

注意事项

• terser-webpack-plugin 版本需要4.x以上

• vuecli 4.x 对应的htmlWebpackPlugin也必须是4.x

config
|-index-development.js
|-index-production.js
|-index-qa.js

// vue.config.js
const { VersionPlugin, VersionCode } = require("./vue-cli-version-static-plugin/index");
const cdn = {
  css: ["/static/plugins/pageoffice-5.2.0.6/pageoffice.css"],
  js: [
    "/static/plugins/pageoffice-5.2.0.6/pageoffice.js",
    "/static/plugins/echarts-4.9.0/echarts.common.min.js",
    "https://gw.alipayobjects.com/os/antv/pkg/_antv.hierarchy-0.4.0/build/hierarchy.js",
    "https://api.map.baidu.com/api?v=2.0&ak=28209425e505ba8c3c4ade607ca46fd7&__ec_v__=20190126"
  ]
};
module.exports = {
publicPath: '/',//dynamicPublicPath为true时不设置任何值
assetsDir: VersionCode,
chainWebpack: (config) => {
  config.plugin("html").tap((args) => {
      args[0].minify = false;
      args[0].cdn = cdn
      return args;
    });
 },
configureWebpack: (config) => {
    config.plugins.push(new VersionPlugin());
}
}
//package.json
// 通过config适配不同配置,默认为当前process.env.NODE_ENV值，对应config 文件夹下的index-{name}文件
 "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build --no-clean --report",
    "qa": "vue-cli-service build --no-clean --report --config qa"
  }
//main.js dynamicPublicPath设置true时
if (window.SITE_CONFIG["publicPath"])
  __webpack_public_path__ = window.SITE_CONFIG["publicPath"]