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",

最后

以上就是甜美舞蹈为你收集整理的vue项目页面内容不同打包出不同的两个包的全部内容，希望文章能够帮你解决vue项目页面内容不同打包出不同的两个包所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。