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

116 阅读 0 评论 77 点赞

我是靠谱客的博主甜美舞蹈，这篇文章主要介绍vue项目页面内容不同打包出不同的两个包，现在分享给大家，希望可以做个参考。

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

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

复制代码

1
2
3
# 开发环境配置
ENV = 'development'

在.env.production中

复制代码

1
2
3
# 生产环境配置
ENV = 'production'

2.在登录页演示按钮

复制代码

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

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

复制代码

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

在package.jsond的scripts中新加两个

复制代码

1
2
3
4
5
  "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",