vue项目页面内容不同打包出不同的两个包

最新推荐文章于 2023-06-15 19:35:17 发布

原创最新推荐文章于 2023-06-15 19:35:17 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何在Vue项目中根据开发环境和生产环境的不同，动态隐藏或展示登录页面的演示按钮。通过`.env`配置文件和Vue状态管理，确保在开发环境中显示，生产环境下隐藏，实现按需打包。

vue项目页面内容不同打包不同

项目的登录页是微信登录,也可以通过演示按钮直接登录,所以配置环境
思路:在登录页判断是什么环境,如果是开发环境就显示演示按钮,生产环境就不显示,可以使用v-if
1.创建配置文件
.env.development开发环境配置文件和.env.production生产环境配置文件
在.env.development中

# 开发环境配置
ENV = 'development'

在.env.production中

# 生产环境配置
ENV = 'production'

2.在登录页演示按钮

<div v-if="!isShow" >
   <a-button  @click="Login" > 演示进入 </a-button>
 </div>

在state中定义isShow
通过获取是否是开发环境,process.env.ENV

 const state = reactive({
      isShow: process.env.ENV === 'production',
    })

在package.jsond的scripts中新加两个

  "serve:development": "vue-cli-service serve --mode development",
  "serve:production": "vue-cli-service serve --mode production",
  "electron:build:development": "vue-cli-service electron:build --mode development",
  "electron:build:production": "vue-cli-service electron:build --mode production",