前端开发必备技能知识笔记-vue项目中添加版本号

为了npm打包发布后能够查看当前版本号，可以再打包后的index.html中添加meta标签

<meta name="revised" content="定义页面的最新版本"/>

为了在打包的时候自动添加meta标签到dist/index.html，package.json中有一个参数是version，可以只用修改这个参数，实现打包后自动修改版本号，直接修改vue.config.js文件（如果没有这个文件的就直接创建一个vue.config.js文件）

vue.config.js文件配置如下

const packageInfo = require('./package.json'); // 这里拿到package.json的相关信息
module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index'],
      meta: {revised: `版本号, ${packageInfo.version}`}
    },
  }
}

实现自动添加meta标签的就是

 meta: {revised: `版本号, ${packageInfo.version}`}

packageInfo.version就是从package.json中配置的version

npm打包发布后，可以f12查看版本号