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

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

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

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

{  
  "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文件中添加以下配置：

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访问这个变量：

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

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

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

const webpack = require('webpack');

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