vue项目多版本需要不一样如何区分

Question

版本分别分通用版、通用版+绩效版、特别版、特别版+绩效版，通用版和特别版功能不一样 如果用环境变量区分 页面判断估计会很多 有没有更加方案

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

可以使用 Vue.js 的构建步骤来区分不同的版本。在 vue.config.js 文件中，可以使用 process.env.NODE_ENV 来设置不同环境下的构建选项。然后，在项目中使用条件编译来区分不同版本的功能。

1. 在项目根目录下创建或修改 vue.config.js 文件：

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new webpack.DefinePlugin({
          'VUE_APP_VERSION': JSON.stringify(process.env.VUE_APP_VERSION)
        })
      )
    }
  }
}

1. 在项目的 package.json 文件中，为每个版本创建一个脚本命令，并设置相应的环境变量：

"scripts": {
  "build:general": "VUE_APP_VERSION=general vue-cli-service build",
  "build:general_performance": "VUE_APP_VERSION=general_performance vue-cli-service build",
  "build:special": "VUE_APP_VERSION=special vue-cli-service build",
  "build:special_performance": "VUE_APP_VERSION=special_performance vue-cli-service build"
}

1. 在项目中使用条件编译来区分不同版本的功能：

if (process.env.VUE_APP_VERSION === 'general') {
  // 通用版功能代码
} else if (process.env.VUE_APP_VERSION === 'general_performance') {
  // 通用版+绩效版功能代码
} else if (process.env.VUE_APP_VERSION === 'special') {
  // 特别版功能代码
} else if (process.env.VUE_APP_VERSION === 'special_performance') {
  // 特别版+绩效版功能代码
}

1. 根据需要运行相应的构建命令：

npm run build:general
npm run build:general_performance
npm run build:special
npm run build:special_performance

这样，你就可以根据不同的构建命令生成不同版本的项目，并在项目中使用条件编译来区分不同版本的功能。