vue页面上显示package.json中的version

在Vue项目中，你可以使用process.env来访问构建时注入的环境变量，包括package.json中的某些字段。但是，process.env通常不会直接包含package.json的所有内容。不过，你可以通过构建脚本将version字段注入到环境变量中。

以下是如何在Vue项目中获取package.json中的version字段的步骤：

1. 在你的package.json文件中，确保有一个version字段：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

{    "name": "my-vue-app",    "version": "1.0.0",    "scripts": {      "serve": "vue-cli-service serve",      "build": "vue-cli-service build",      "lint": "vue-cli-service lint"    },    "dependencies": {      // ...    },    "devDependencies": {      // ...    }  }

2. 使用Vue CLI的chainWebpack或者configureWebpack选项来修改Webpack配置，以便在构建时注入version到环境变量中。你可以在你的vue.config.js文件中添加以下配置：

?

1 2 3 4 5 6 7 8 9

module.exports = {    configureWebpack: {      plugins: [        new webpack.DefinePlugin({          'process.env.VUE_APP_VERSION': JSON.stringify(require('./package.json').version)        })      ]    }  };

这段代码使用了webpack.DefinePlugin来创建一个全局常量process.env.VUE_APP_VERSION，并将其设置为package.json中的version值。注意，这里使用了VUE_APP_前缀，这是Vue CLI特定的，用于区分用户定义的环境变量和构建时注入的变量。

3. 在你的Vue组件或方法中，你可以通过process.env访问这个变量：

?

1 2 3 4 5

export default {    mounted() {      console.log('项目的版本号为：', process.env.VUE_APP_VERSION);    }  }

在上面的代码中，process.env.VUE_APP_VERSION将包含从package.json中读取的version值。

请确保你已经安装了webpack，并且在vue.config.js文件中正确地引入了它：

?

1	const webpack = require('webpack');

这样，在Vue项目构建时，VUE_APP_VERSION将被注入到生成的代码中，并且你可以在运行时通过process.env.VUE_APP_VERSION访问它。