Vue2切换生产环境、测试环境和开发环境

本文介绍了在Vue2项目中配置不同环境的方法,包括使用`config`和`build`文件夹的常规方式,以及当这些文件夹不存在时,如何通过`.env`文件设置开发、测试和生产环境。详细步骤包括修改`package.json`脚本、配置`webpack`文件以及创建相应的`.env`文件来指定环境变量。
摘要由CSDN通过智能技术生成

  最近小咸儿一直在学习有关Vue的东西,所以将最近在弄得东西总结下来,以供参考。

  Vue配置环境变量和模式,可以分为两种模式:

  第一种:Vue项目搭建成功后,config和build文件夹都存在
​​​​在这里插入图片描述
  知道有这两个文件夹后,接下来就该配置环境变量以及对应的模式了。

  首先,看一下package.json中配置的启动方式:
在这里插入图片描述
  从中,可以看出使用npm run dev启动项目时,dev走的文件是build下面的webpack.dev.conf.js文件

  那么,我们去看一下webpack.dev.conf.js文件中是如何配置的
在这里插入图片描述
  这时,可以发现最终寻找的文件是config/dev.env文件

  知道这一点之后,我们就可以在config/dev.env文件中将我们想要切换的开发模式以及对应的地址放入其中了:

'use strict'
const merge = require('webpack-merge&
  • 10
    点赞
  • 48
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
Vue项目中切换环境需要修改的是`.env`和`.env.[mode]`文件。其中`.env`文件是公共的环境变量文件,而`.env.[mode]`文件则是针对不同模式(如:开发环境测试环境生产环境)的环境变量文件。 1. 在根目录下创建`.env.development`、`.env.test`和`.env.production`文件,分别对应开发环境测试环境生产环境。 2. 在`.env.development`、`.env.test`和`.env.production`文件中设置相应的环境变量,例如: ``` # .env.development VUE_APP_BASE_API = 'http://localhost:8080/api' ``` ``` # .env.test VUE_APP_BASE_API = 'http://test.example.com/api' ``` ``` # .env.production VUE_APP_BASE_API = 'http://example.com/api' ``` 3. 修改`package.json`文件中的`scripts`命令,例如: ``` "scripts": { "serve": "vue-cli-service serve --mode development", "build:dev": "vue-cli-service build --mode development", "build:test": "vue-cli-service build --mode test", "build:prod": "vue-cli-service build --mode production" } ``` 4. 在Vue组件中可以通过`process.env.VUE_APP_BASE_API`来获取环境变量值,例如: ``` axios.get(`${process.env.VUE_APP_BASE_API}/user`) .then(response => console.log(response)) .catch(error => console.log(error)) ``` 这样就可以根据不同的命令来切换不同环境了。例如,在开发环境下运行`npm run serve`命令,就会使用`.env.development`文件中的环境变量。在生产环境下运行`npm run build:prod`命令,就会使用`.env.production`文件中的环境变量。
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值